1

当我想通过 javascript 代码滚动网站时，设置.scrollTop属性的正确元素是什么？

是window,document还是元素document.body？html

jQuery 是否有一些技巧来检测滚动主视口和统一调用的意图？在我看来，有时$(window).scroolTop(value)有效，但有时无效。

4

4 回答 4

1

bobince 的回答有一个附加条件，即 Webkit 浏览器错误地将 documentElement.scrollTop 设置为零，无论您是处于怪癖模式还是标准模式；因此，您不能完全依赖他的单线。

https://bugs.webkit.org/show_bug.cgi?id=9248

http://code.google.com/p/chromium/issues/detail?id=2891

有足够权限的人应该对 bobince 的回答发表评论，以免错过，然后我可以删除这篇文章。

于 2010-12-08T20:59:20.700 回答
1

通常，<html>元素，又名document.documentElement. 但是，如果您使用的是 Quirks Mode，则<body>( document.body) 表示视口。（HTML/CSS 没有明确声明/要求这一点，但它是所有现代浏览器的工作方式。）

您永远不想处于 Quirks 模式，但如果您正在编写脚本以包含在其他人的页面上，您将不得不处理它：

var viewport= document.compatMode==='BackCompat'? document.body : document.documentElement;
// do something with viewport.scrollTop

jQuery 使用window.scrollTo()而不是直接设置滚动属性。无论哪种方式在实践中都几乎相同。您可能会争辩说 usingscrollTo更简洁一些，因为它避免了依赖于由特定元素表示的视口，但是 jQuery 仍然必须使用scrollTop/scrollLeft来读取“其他”属性的当前值，所以没有什么大的胜利。您可以使用pageXOffset/pageYOffset来读取当前滚动位置而不依赖于特定元素，但它并不在所有地方都受支持，因此您仍然必须回退到该scrollTop方法。

遗憾的是，这些属性/方法在过去都没有被标准化。CSSOM Views最终解决了这个问题。

于 2010-12-07T11:35:56.640 回答
0

我之前也遇到过这个问题，它在许多浏览器中的表现完全不同。我最终使用了这段相当可怕的代码：

function scrollToTop() {
    $('body, html').scrollTop(0);

    if ($.browser.webkit || $.browser.safari) {
        // Hack for webkit browsers: hide and show canvas layer so window will scroll up.
        // (scrollTop does not work right).
        $('#canvas').hide();
        window.setTimeout(function () {
            $('#canvas').show();
        }, 0);
    }
}

但是，我只需要滚动到顶部，这更容易。如果您想滚动到特定点，我不确定您将如何执行此操作。也许使用锚？

于 2010-12-07T10:43:33.883 回答
0

取决于您正在滚动的内容、文档/窗口或分区

于 2010-12-07T10:33:28.430 回答