JQuery анимация scrolltop в Opera bug

Кто-нибудь пробовал использовать

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

в браузере Opera?

Это странный эффект, особенно если вы прокручиваете длинную страницу, кажется, что страница идет сначала вверх, а затем прокручивает вниз до правой точки. Это странный тревожный эффект...

Есть ли способ обхода решения? спасибо

Ответ 1

В прошлом атрибут не был правильно определен. Он, как мне кажется, был представлен IE, а затем обратный, спроектированный для реализации различными пользовательскими агентами. Это было описано в CSSOM (все еще рабочий проект). На сегодняшний день в Opera все еще есть ошибка, которая находится в процессе исправления.

~~## Возможный взлом.~~

Решение будет

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

Будьте осторожны, потому что, если Opera исправляет это в какой-то момент, код, вероятно, будет вести себя странно. Дел >

Почему?

В режиме Firefox и IE quirks вы должны установить свойство на "body", чтобы прокрутить страницу, в то время как оно игнорируется, если вы установите его на "html" .
В режиме стандартов Firefox и IE вы должны установить свойство на "html" для прокрутки страницы, в то время как оно игнорируется, если вы установите его на "тело".
В Safari и Chrome в любом режиме вы должны установить свойство на "тело", чтобы прокручивать страницу, в то время как он игнорируется, если вы установите его на "html" .

Поскольку страница находится в стандартном режиме, они должны установить ее как на "html" , так и на "body", иначе она не будет работать в Safari/Chrome.

Теперь вот плохая новость; в Opera, когда вы читаете scrollTop тела, это правильно 0, так как тело не прокручивается внутри документа. Но Opera будет прокручивать окно просмотра, если вы установите смещение прокрутки на "html" или "body". В результате анимация устанавливает два свойства, один раз для "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 );
        }
    }

Ответ 2

Этот http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html#opera может быть лучшим решением без использования каких-либо функций Opera и учета режима quirks.

Ответ 3

$("body:not(:animated)").animate({ scrollTop: destination}, 500 );
return false;

работает и для меня, и в опере.

EDIT: не работает в firefox, хотя

Ответ 4

У меня тоже была эта проблема. Это то, что я использую, и оно работает. Это не браузер, нюхающий, но это не особо приятный код, мне. На данный момент это работает.

Вызов scrollTop на элементе html в Opera 11/IE 8/FF 3.6 возвращает число больше нуля

Вызов scrollTop на элемент html в Chrome 10/Flock 3.5/Safari 5 (для Windows) возвращает 0

Итак, просто проверьте, что:

Если браузер Opera, вы проверяете число больше 0 на scrollTop и вызываете scrollTop только для html, a la

var html = document.getElementsByTagName('html')[0];

var body = document.getElementsByTagName('body')[0];

$(html).animate({scrollTop:0+'px'},{'duration':1000,'easing':'swing'});

Если браузер Chrome, Flock или Safari, чем scrollTop вернет 0, и вы проверите это, действуя соответственно:

$(html,body).animate({scrollTop:0+'px'},{'duration':1000,'easing':'swing'});

Итак, вы установите влияние на html для режима стандартов FF и IE (также должны быть прикрыты причуды), а также тело для Chrome и Safari.

В Opera, которая пытается прокрутить оба html и body, что приводит к массовой причудливости, scrollTop возвращает число больше 0, поэтому вы вызываете только html, и вы не получаете мерцающую бессмыслицу.

Таким образом, вы можете безопасно использовать как html, так и тело, когда это необходимо, или просто html, когда браузер является Opera.

И не забудьте yer preventDefault(), или это будет еще одно странное мерцание, о котором вам придется беспокоиться.;)

Эй, я не ниндзя JS, но я стараюсь, и это работает для меня, и сейчас у меня нет времени расследовать его так, как хотелось бы, поэтому я подумал, что опубликую это здесь и помощь. Если я ошибаюсь, я задержу руки и скажу это.;) Так что обратная связь, пожалуйста.: D

Том.

Ответ 5

Оп! У меня возникла проблема с действием функции animate({scrollTop: }), вызванной в функции click().

Лучший способ http://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html#opera, который был написан здесь Divya Manian.

Для вызова функции прокрутки или функции анимации нужно использовать event.preventDefault(), чтобы завершить событие click перед запуском события прокрутки.

Что-то вроде этого:

$(<clicked_element>).click(function(event){
    event.preventDefault();
    $('html, body').animate({scrollTop: <value>}, 600);
});

EDIT: Важно применить метод прокрутки к элементам $('html, body')