jQuery анимированная прокрутка при ошибке 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 quirks вы должны установить свойство «body», чтобы прокручивать страницу, в то время как оно игнорируется, если выустановите его на «HTML».
• В стандартном режиме Firefox и IE вы должны установить свойство в «html», чтобы прокручивать страницу, при этом оно игнорируется, если вы устанавливаете его в «теле».
• В Safari и Chrome, в любом режиме вы должны установить свойство в «теле», чтобы прокручивать страницу, при этом оно игнорируется, если вы устанавливаете его в «html».

Поскольку страница находится в стандартном режиме, они должны установить ее как в «html», так и в «теле», иначе она не будет работать в 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 );
        }
    }

Answer 2

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

Answer 3

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

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

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

Примерно так:

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

РЕДАКТИРОВАТЬ: Важно применить метод прокрутки к $('html, body') элементам

Answer 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,а-ля

</p> <p>var html = document.getElementsByTagName('html')[0];</p> <p>var body = document.getElementsByTagName('body')[0];</p> <p>$(html).animate({scrollTop:0+'px'},{'duration':1000,'easing':'swing'});</p> <p>

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

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

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

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

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

И не забывайте, что вы используете protectDefault (), иначе это будет еще одна странная вспышка, о которой вам придется беспокоиться.;)

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

Том.

Answer 5

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

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

РЕДАКТИРОВАТЬ: не работает в Firefox, хотя