документ.тело.scrollTop Firefox возвращает 0: только JS

Question

документ.тело.scrollTop Firefox возвращает 0: только JS

любые альтернативы в чистом javascript?

следующие работы в opera, chrome и safari. Еще не протестированы на explorer:

http://monkey-me.herokuapp.com

https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js

при загрузке страницы следует прокрутить вниз до div '.содержание:

var destiny = document.getElementsByClassName('content');

var destinyY = destiny[0].offsetTop;

scrollTo(document.body, destinyY, 200);



function scrollTo(element, to, duration) {

    if (duration <= 0) return;

    var difference = to - element.scrollTop;

    var perTick = difference / duration * 2;



    setTimeout(function() {

        element.scrollTop = element.scrollTop + perTick;

        scrollTo(element, to, duration - 2);

    }, 10);

};

613 3

javascript firefox cross-browser

3 ответов:

Comments

Ничего не найдено.

Michelangelo · Accepted Answer · 2016-08-18 18:56:18

попробуйте использовать этот: document.documentElement.scrollTop. Если я прав document.body.scrollTop устарела.

обновление

похоже, что Chrome не играет вместе с ответом, чтобы быть безопасным, как предложил @Nikolai Mavrenkov в комментариях:

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

Теперь все браузеры должны быть закрыты.

Wh1T3h4Ck5 · Accepted Answer · 2016-07-15 17:16:51

вместо если условия, есть более простой способ получить правильный результат, используя что-то вроде этого логического выражения.
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
обе части возвращают ноль по умолчанию, поэтому, когда ваш свиток находится в нулевом положении, это вернет ноль, как и ожидалось.
bodyScrollTop = 0 || 0 = 0
на странице-прокрутка одна из этих частей вернет ноль, а другая вернет некоторое число больше нуля. Обнуленное значение принимает значение false, а затем логическое или|| будет возьмите другое значение в качестве результата (например. ваш ожидаемый scrollTop и 300).

Firefox-подобные браузеры увидят это выражение как
bodyScrollTop = 300 || 0 = 300
а остальные браузеры видят
bodyScrollTop = 0 || 300 = 300
который снова дает такой же и правильный результат.

на самом деле, это все о something || nothing = something :)

Anthony Johnston · Accepted Answer · 2017-02-22 16:17:02

стандарт document.documentElement и это используется FF и IE.

WebKit использует document.body и не мог использовать стандарт из-за жалоб на обратную совместимость, если они изменились на стандарт, этот пост объясняет это красиво

https://miketaylr.com/posts/2014/11/document-body-scrolltop.html

есть новое свойство на документе, который WebKit теперь поддерживает

https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement

Так что это приведет вас к нужному элементу
var scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 100;
и есть полифилл тоже

https://github.com/mathiasbynens/document.scrollingElement