使用javascript滚动HTML页面？_Javascript_Dom_Scroll_Dhtml_Smooth Scrolling

使用javascript滚动HTML页面？

javascript dom scroll

使用javascript滚动HTML页面？,javascript,dom,scroll,dhtml,smooth-scrolling,Javascript,Dom,Scroll,Dhtml,Smooth Scrolling,我创建了一个可以通过JavaScript滚动的页面，但在某些浏览器中，当您将文本和文本添加到该页面时，它的滚动不是很平滑？而且在chrome中似乎根本不起作用我的问题是：使用跨浏览器的JavaScript创建平滑滚动html页面的最佳方法是什么。为了了解我想做什么，这里是我制作的测试页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

我创建了一个可以通过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>


测试
html
{
溢出：隐藏；
}
#固定顶
{
填充：1%；
位置：固定；
浮动：左；
垂直对齐：中间对齐；
}
table.scollTable td
{
背景颜色：灰色；
高度：12px；
宽度：12px；
}
table.scollTable td：悬停
{
背景色：石灰；
高度：20px；
宽度：20px；
}
.集装箱
{
背景：url(http://sstatic.net/so/img/logo.png)重复；
高度：5000px；
宽度：5000px；
}
功能滚动（x、y、elem）{
var iScroll=setInterval(
函数（）{
SetScroll（（x+GetXScroll（）），（y+GetYScroll（））
}, 1);
elem.onmouseout=function（）{clearInterval（iScroll）}；
}
函数GetYScroll（）{
return window.pageYOffset | | | | document.body.scrollTop | | | document.documentElement.scrollTop；
}
函数GetXScroll（）{
return window.pageXOffset | | | document.body.scrollLeft | | | document.documentElement.scrollLeft；
}
函数设置克罗尔（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）{
试一试{
window.pageXOffset=x；
window.pageYOffset=y；
}捕获（e）{}
}
}

考虑使用。查看更多信息。

尝试使用进行滚动

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

还有一件事：我注意到您尝试使用XHTML。请注意，Internet Explorer在正确显示XHTML（包括HTTP标头等）时，无法显示XHTML。在其他标准得到广泛支持之前，我建议继续使用HTML4.01 strict。无论如何，您将无法跨浏览器使用XHTML的优势。
请仔细查看本演示的内容。它可能会给你一些想法：
我建议查看这个插件：它是为jQuery编写的。该页面将让您了解它的功能，但请查看文档
我建议使用jQuery的原因也是，没有更好的库可以让复杂的Javascript任务变得简单和易于管理。对于此任务，您实际上只需要执行以下操作：

$('#element').mouseover(function() { $(this).scrollTo(20); });

我最初的想法之一是使用$（）.animate（）；但它很紧张，在chrome中不起作用。我尽可能地将代码发布为通用代码，因为我希望有一些示例，不想将本文的范围缩小到jQuery。似乎每个人对js问题的回答都是“在阅读问题之前使用jQuery”。我并不是说不要使用jQuery，只是尽量不要太笼统。但是，如果你说的是这样的话，有多少Web服务器会自动检测XHTML并因此声明不同的MIME类型呢？此外，XHTML的优势不仅在于浏览器，还在于一些代码编辑器。我不知道有多少服务器试图检测XHTML。他们还需要检测浏览器，因为它们的行为不同，否则在最坏的情况下，您可能会收到“Doyouwanttodownloadthisfile”消息，而不是页面显示。因此，我建议现在使用HTML浏览器。毫无疑问，XHTML有它的优势，例如在您提到的开发过程中，因此使用它并没有什么错。但是你仍然应该向浏览器发送一个HTML版本，因为它更有可能工作。我希望这种改变能让XHTML发送给客户而不用担心。