$ (document).scrollTop() всегда возвращает 0

Я просто пытаюсь сделать что-то, когда позиция прокрутки страницы достигает определенной высоты. Однако scrollTop() возвращает 0 или null независимо от того, как далеко вниз я прокручиваю. Это вспомогательная функция, которую я использую для проверки значения scrollTop():

$('body').click(function(){
    var scrollPost = $(document).scrollTop();
    alert(scrollPost);
});

Я пробовал прикреплять scrollTop() к $('body'), $('html') и, конечно, $(window), но ничего не меняется.

Любые идеи?

Ответы

Ответ 1

По какой-то причине удаление "height: 100%" из моих тегов html и body устраняет эту проблему.

Я надеюсь, что это поможет кому-то еще!

Ответ 2

У меня была такая же проблема с scroll = 0 в:

document.body.scrollTop

В следующий раз используйте

document.scrollingElement.scrollTop

Изменить 01.06.2018

Если вы используете event то вы получили объект, который имеет элемент document в target или srcElement. Example Вот таблица, показывающая операции прокрутки в разных браузерах.

enter image description here

Как вы можете видеть, Firefox и IE не имеют srcElement а IE 11 не поддерживает scrollingElement.

Ответ 3

Мое решение, попробовав некоторые из вышеперечисленных и не связанное с изменением CSS:

var scroll_top = Math.max( $("html").scrollTop(), $("body").scrollTop() )

Это работает в современных версиях Chrome, Firefox, IE и Edge.

Ответ 4

У меня есть дополнение для тех, кто может совершить ту же ошибку, что и я. Мой код был следующим:

var p = $('html,body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );

Этот код будет работать во всем браузере, за исключением браузера веб-китов, такого как хром и сафари, потому что тег <html> всегда имеет значение scrollTop, равное нулю или null.

Другие браузеры игнорируют его, пока браузеры webkit этого не делают.

Самое простое решение - просто удалить тег html из вашего кода et Voila:

var p = $('body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );

Ответ 5

Снятие height: 100%; из HTML и теги тела могут решить эту проблему.

Причина в том, что вы могли бы установить 100% как значение свойства height html и элементов body. Если вы установите для свойства height элементов html и body значение 100%, они получат высоту, равную высоте документов.

Ответ 6

была та же проблема. scrollTop() работает с некоторым блоком, а не документом или телом. Чтобы этот метод работал, u должен добавить стиль высоты и переполнения для вашего блока:

#scrollParag {
    height: 500px;
    overflow-y: auto;
}

И затем:

var scrolParag = document.getElementById('scrollParag');
 alert(scrolParag.scrollTop); // works!

Ответ 7

Кстати, кажется, что вы должны использовать

$("body").scrollTop()

вместо

$(".some-class").scrollTop

Вот почему я застрял.

Ответ 8

Scroll Top всегда возвращался и для меня. Я использовал его для привлечения внимания к конкретному элементу на странице. Я использовал другой подход для этого.

document.getElementById( "elementID" ) scrollIntoView();.

Хорошо работает для меня на мобильных устройствах, планшетах и ​​на рабочем столе.