3

我创建了一个通过 JavaScript 滚动的页面，但在某些浏览器中，当您向页面发送文本时，它的滚动不是很顺畅？它似乎在 chrome 中根本不起作用。

我的问题是：
使用跨浏览器工作的 JavaScript 创建平滑滚动的 html 页面的最佳方法是什么。

为了了解我想要做什么，这是我制作的测试页面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>test</title>
    <style type="text/css">
        html
        {
            overflow:hidden;
        }
        #fixedtop
        {
            padding:1%;
            position:fixed;
            float:left;
            vertical-align:middle;
        }
        table.scollTable td
    {
        background-color:Gray;
        height:12px;
        width:12px;
    }
    table.scollTable td:hover
    {
        background-color:Lime;
        height:20px;
        width:20px;
    }
        .container
        {
            background:url(http://sstatic.net/so/img/logo.png) repeat;
            height:5000px;
            width:5000px;
        }
    </style>
</head>
<body>
    <form name="form1" method="post" action="TestPage.aspx" id="form1">
<div>
</script>
 
    <div id="fixedtop">
        <table class="scollTable" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td onmouseover="scroll(-20,-20,this)"></td>
                <td onmouseover="scroll(-10,-20,this)"></td>
                <td onmouseover="scroll(0,-20,this)"></td>
                <td onmouseover="scroll(10,-20,this)"></td>
                <td onmouseover="scroll(20,-20,this)"></td>
            </tr>
            <tr>
                <td onmouseover="scroll(-20,-10,this)"></td>
                <td onmouseover="scroll(-10,-10,this)"></td>
                <td onmouseover="scroll(0,-10,this)"></td>
                <td onmouseover="scroll(10,-10,this)"></td>
                <td onmouseover="scroll(20,-10,this)"></td>
            </tr>
            <tr>
                <td onmouseover="scroll(-20,0,this)"></td>
                <td onmouseover="scroll(-10,0,this)"></td>
                <td></td>
                <td onmouseover="scroll(10,0,this)"></td>
                <td onmouseover="scroll(20,0,this)"></td>
            </tr>
            <tr>
                <td onmouseover="scroll(-10,10,this)"></td>
                <td onmouseover="scroll(-10,10,this)"></td>
                <td onmouseover="scroll(0,10,this)"></td>
                <td onmouseover="scroll(10,10,this)"></td>
                <td onmouseover="scroll(10,10,this)"></td>
            </tr>
            <tr>
                <td onmouseover="scroll(-20,20,this)"></td>
                <td onmouseover="scroll(-10,20,this)"></td>
                <td onmouseover="scroll(0,20,this)"></td>
                <td onmouseover="scroll(10,20,this)"></td>
                <td onmouseover="scroll(20,20,this)"></td>
            </tr>
        </table>
    </div>
    
    <div class="container"></div>
</form>
</body>
</html>
<script id="sTest" type="text/javascript" onload="test()"> 
 
 
    function scroll(x,y, elem) {
        var iScroll = setInterval(
        function() {
            SetScroll((x + GetXScroll()), (y + GetYScroll()))
        }, 1);
        elem.onmouseout = function() { clearInterval(iScroll) };
    }
 
    function GetYScroll() {
        return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
    }
 
    function GetXScroll() {
        return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
    }
 
    function SetScroll(x,y) {
        if (document.body.scrollTop) {
            document.body.scrollLeft = x;
            document.body.scrollTop = y;
        }
        if(document.documentElement){
            document.documentElement.scrollLeft = x;
            document.documentElement.scrollTop = y;
        }
        if (window.pageYOffset) {
            try {
                window.pageXOffset = x;
                window.pageYOffset = y;
            } catch (e) { }
        }
    }
</script>
4

4 回答 4

0

看看这个演示的幕后花絮。它可能会给你一些想法： xAnimation.scroll

于 2009-12-29T15:44:34.477 回答
0

我建议查看这个插件：http ://demos.flesler.com/jquery/scrollTo/ ，它是为 jQuery 编写的。该页面会让您知道它的功能，但请查看http://flesler.blogspot.com/2007/10/jqueryscrollto.html以获取文档。

我也建议使用 jQuery 的原因是没有更好的库可以使复杂的 Javascript 任务变得简单和易于管理。对于此任务，您实际上只需要执行以下操作：

$('#element').mouseover(function() {
    $(this).scrollTo(20);
});
于 2010-02-13T01:21:35.823 回答
0

尝试使用window.scrollBy进行滚动。

我赞同 Evan 使用图书馆的想法——没有图书馆，你只会浪费很多时间。jQuery 只是一种选择，最好的选择取决于你在做什么。

还有一件事：我注意到您尝试使用 XHTML。请注意，正确完成后 Internet Explorer无法显示 XHTML（包括 HTTP 标头等）。在其他标准得到广泛支持之前，我建议严格使用 HTML 4.01。无论如何，您将无法使用 XHTML 的跨浏览器优势。

于 2009-10-22T22:28:26.713 回答
-1

考虑使用jQuery。查看此问题以获取更多信息。

于 2009-10-22T20:44:14.133 回答