javascript - jQuery animate scrolltop on Opera 错误

Question

有没有人用过

$(“html, body”).animate({scrollTop:0}, 'slow');

在 Opera 浏览器上？

它会产生一种奇怪的效果，尤其是当您在一个长页面上滚动时，页面似乎先到达顶部然后向下滚动到正确的位置。这是一种奇怪的令人不安的效果......

是否有解决方法？谢谢

Answer 1

过去没有正确定义该属性。我认为它是由 IE 引入的，然后通过逆向工程由不同的用户代理实现。自此在 CSSOM 中进行了描述(仍然是工作草案)。截至今天，Opera 中确实存在一个正在修复的错误。

## 可能的破解。

一个解决方案是

$(window.opera?'html':'html, body').animate({ 
  scrollTop:0}, 'slow' 
);

要小心，因为如果 Opera 在某一点修复它，代码可能会表现得很奇怪。

为什么？

• 在 Firefox 和 IE 怪异模式下，您必须在“body”上设置该属性才能使页面滚动，而如果在“html”上设置则忽略该属性。
• 在Firefox 和IE 标准模式下，您必须在“html”上设置该属性才能使页面滚动，而如果在“body”上设置则忽略该属性。
• 在 Safari 和 Chrome 中，在任何一种模式下，您都必须在“body”上设置该属性才能使页面滚动，而如果在“html”上设置该属性，则该属性将被忽略。

由于页面处于标准模式，他们必须在“html”和“body”上都设置它，否则它将无法在 Safari/Chrome 中工作。

现在有个坏消息；在 Opera 中，当您读取 body 的 scrollTop 时，它正确地为 0，因为 body 在文档中不可滚动。但如果您在“html”或“body” 上设置滚动偏移，Opera 将滚动视口(viewport)。结果，动画设置了两个属性，一次用于“html”，一次用于“body”。第一个从正确的位置开始，而第二个从 0 开始，导致闪烁和奇怪的滚动位置。

不涉及用户代理嗅探的更好解决方案

来自 http://w3fools.com/js/script.js

    // find out what the hell to scroll ( html or body )
    // its like we can already tell - spooky
    if ( $docEl.scrollTop() ) {
        $scrollable = $docEl;
    } else {
        var bodyST = $body.scrollTop();
        // if scrolling the body doesn't do anything
        if ( $body.scrollTop( bodyST + 1 ).scrollTop() == bodyST) {
            $scrollable = $docEl;
        } else {
            // we actually scrolled, so, er, undo it
            $body.scrollTop( bodyST - 1 );
        }
    }