Question

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

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

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

Answer 1

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

你不想进入怪癖模式，但如果你正在编写一个脚本以包含在其他人的页面中，你将不得不处理它：

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

jQuery使用window.scrollTo()而不是直接设置滚动属性。无论哪种方式在实践中几乎都是一样的。您可以争辩说使用scrollTo更简洁，因为它避免依赖于由特定元素表示的视口，但是jQuery仍然必须使用scrollTop / scrollLeft来阅读无论如何，'其他'财产的当前价值，所以没有大赢。您可以使用pageXOffset / pageYOffset来读取当前滚动位置，而不依赖于特定元素，但不会在任何地方支持它，因此仍然必须回退到{{1方法。

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

Answer 2

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

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

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

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

Answer 3

取决于您正在滚动的内容，文档/窗口或部门

Answer 4

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

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);
    }
}

但是，我只需要滚动到顶部，这更容易。如果你想滚动到一个特定的点，我不知道你会怎么做。也许使用锚点？

正确的主视口的HTML滚动元素（+ jQuery）

4 个答案: