jQuery动画滚动Opera上的bug [英] jQuery animate scrolltop on Opera bug

问题描述

有人尝试使用

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

在Opera浏览器上

一个奇怪的效果，特别是如果你在一个长的页面上滚动，似乎页面首先到顶部，然后向下滚动到正确的点。这是一个奇怪的打扰效果...

It does a weird effect especially if you scroll on a long page, it seems like the page go first to the top and then it scroll down to the right point. It is a weird disturbing effect...

是否有任何解决方法来解决它？谢谢

Is there any workaround to fix it? thanks

推荐答案

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

The attribute was not defined properly in the past. It was introduced by IE, I think, then reverse engineered to be implemented by different user agents. It has been since described in CSSOM (still a working draft). As of today, there is still a bug indeed in Opera which is being in the process to be fixed.

##可能的黑客。

## Possible hack.

解决方案将是

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

请小心，因为如果Opera修复它，那么代码很可能会出现异常。

Be careful because if Opera fixes it at a point, the code is likely to behave strangely.

• 在Firefox和IE怪癖模式下，您必须设置body上的属性来使页面滚动，如果将其设置为html，则忽略该属性。


• 在Firefox和IE标准模式下，您必须在html上设置属性，使页面滚动，如果将其设置在body上，则忽略该属性。


• 在Safari和Chrome中，在任一模式下，您必须设置body上的属性，使页面滚动，如果将其设置为html

由于页面处于标准模式，因此必须将其设置为html和body在Safari / Chrome中工作。

Since the page is in standards mode, they have to set it on both the "html" and "body, or it won't work in Safari/Chrome.

现在这里是坏消息;在Opera中，当您读取身体的scrollTop时，它是正确的0，因为身体不是但是如果在html或body上设置滚动偏移量，Opera会滚动视口，因此，动画设置两个属性，一次为html 和一次为身体，第一个从正确的地方开始，而第二个从0开始，导致闪烁和奇怪的滚动位置。

Now here's the bad news; in Opera, when you read the scrollTop of the body it is correctly 0, since the body is not scrollable within the document. But Opera will scroll the viewport if you set the scrolling offset on either the "html" or "body". As a result, the animation sets two properties, once for the "html" and once for the "body". The first starts at the right place, while the second starts at 0, causing the flicker and odd scroll position.

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

这篇关于jQuery动画滚动Opera上的bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！