当前位置：文江博客话题详情

主视口的正确 HTML 滚动元素 (+jQuery)

发布于 2024-10-06 02:35:13 字数 274 浏览 6 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终止放荡 2024-10-13 02:35:14

通常，元素，又名 document.documentElement。但是，如果您使用 Quirks 模式，则 (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 无论如何都可以读取“other”属性的当前值，所以没有什么大的胜利。您可以使用 pageXOffset/pageYOffset 来读取当前滚动位置，而不依赖于特定元素，但并非所有地方都支持它，因此您仍然必须回退到 scrollTop 方法。

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

Normally, the <html> element, aka document.documentElement. However if you are using Quirks Mode, <body> (document.body) represents the viewport instead. (HTML/CSS doesn't explicitly state/require this, but it is how all modern browsers work.)

You don't ever want to be in Quirks Mode, but if you're writing a script for inclusion on other people's pages you will have to deal with it:

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

jQuery uses window.scrollTo() instead of setting the scroll properties directly. Either way is pretty much the same in practice. You could argue that using scrollTo is a bit cleaner in that it avoids relying on the viewport being represented by a particular element, but then jQuery still has to use scrollTop/scrollLeft to read the current value of the ‘other’ property anyway, so no big win. You can use pageXOffset/pageYOffset to read the current scroll position without relying on a particular element, but it's not supported everywhere so you still have to fallback to the scrollTop method.

Sadly none of these properties/methods have been standardised in the past. CSSOM Views finally address this.

回复收藏 0 原文

小情绪 2024-10-13 02:35:14

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

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

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

拥有足够权限的人应该将此评论作为 bobince 答案的评论，这样就不会错过，然后我就可以删除这篇文章。

回复收藏 0 原文

不忘初心 2024-10-13 02:35:14

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

回复收藏 0 原文

云雾 2024-10-13 02:35:14

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

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

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

I had this problem before as well, and it behaved quite differently in a number of browsers. I ended up using this rather horrible piece of code:

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

However, I only needed to scroll to the top, which is easier. I'm not sure how you would do this if you want to scroll to a specific point. Maybe use anchors?

回复收藏 0 原文

~没有更多了~