Document.body.scrollTop Firefox возвращает 0: ТОЛЬКО JS
Любые альтернативы в чистом javascript?
Следующие операции выполняются в опере, хроме и сафари. Еще не тестировали в проводнике:
http://monkey-me.herokuapp.com
https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js
При загрузке страницы необходимо прокрутить вниз до div..content ':
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);
};
Ответы
Ответ 1
Попробуйте использовать это: document.documentElement.scrollTop
. Если я прав, document.body.scrollTop
устарел.
Обновление
Похоже, что Chrome не играет вместе с ответом, чтобы быть в безопасности, как предложил @Nikolai Mavrenkov в комментариях:
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
Теперь все браузеры должны быть закрыты.
Ответ 2
Вместо использования условий IF существует более простой способ получить правильный результат, используя что-то вроде этого логического выражения.
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
Обе части возвращают ноль по умолчанию, поэтому, когда ваш свиток находится в нулевом положении, он будет возвращать нуль, как ожидалось.
bodyScrollTop = 0 || 0 = 0
На странице прокрутки одна из этих частей вернет ноль, а другая вернет некоторое число, большее нуля. Значение Zeroed оценивается как false, а затем логическое ИЛИ ||
будет принимать другое значение в качестве результата (например, ваш ожидаемый scrollTop 300).
Firefox-подобные браузеры будут видеть это выражение как
bodyScrollTop = 300 || 0 = 300
и остальные браузеры видят
bodyScrollTop = 0 || 300 = 300
который снова дает тот же и правильный результат.
Фактически, все о something || nothing = something
:)
Ответ 3
Стандарт 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;
а также polyfill
https://github.com/mathiasbynens/document.scrollingElement