更正主视口的 HTML 滚动元素 (+jQuery)答案

【问题标题】：Correct HTML scrolling element of main viewport (+jQuery)更正主视口的 HTML 滚动元素 (+jQuery)
【发布时间】：2011-05-21 12:14:04
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery html scroll scrolltop

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案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 的答案，以免错过，然后我可以删除此帖子。

【讨论】：

【解决方案3】：

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

【讨论】：

我正在滚动“最重要的”“东西”。就像用户拖动浏览器窗口的主滚动条一样。页面上没有其他可滚动元素。
这种情况下是window，你必须使用。为什么不把你的代码贴出来，让我们看看
看到这个stackoverflow.com/questions/832860/…

【解决方案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);
    }
}

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

【讨论】：