Как работает событие scroll и ф-я scrollTop?

Question

[Владимир Обабков]

Здравствуйте

Не могу добиться понимания..

Чтобы отследить отступ от верхнего края нужно слушать document. body, html - просто не реагируют на событие scroll.

$(function(){

$(document).on('scroll', function(){
let offsetTop = $(this).scrollTop();
console.log(offsetTop);
}

Далее чтобы .. ну например заскроллить страницу к началу оказывается что к document обращаться бесполезно.. Он этого просто не поймёт..

Теперь уже надо обратиться к body, html :

$(function() {
    
 $('some_button').on('click', function(){
     $('html,body').scrollTop('0');
 })
});

Вопрос : почему я не могу отследить scrollTop у body или html , но само изменение координаты происходит именно у html,body ?

UPD: Пытался на document повесить animate

$(document).animate({
            scrollTop : 0
        },400);

Потому он и не работал.

Вопрос остаётся: почему же не получается повесить scroll на body,HTML, как работает $() с объектом document?

Answer 1

[Максим Тимофеев]

оказывается что к document обращаться бесполезно

не правда:
https://codepen.io/wokster/pen/qymgPZ

Вы кстати понимаете что вот тут:
$('html,body').scrollTop('0');
Вы строку '0' передаете, а не число 0.

Ну и собственно
$('html,body') - передана строка с названием элементов
$(document) - передана переменная, в которой объект содержится

Comments

[Владимир Обабков]

Не заметил кавычек.. А ведь умная функция кушает и не давится )

По какой-то причине на меня жутким матом ругалась консоль когда я к document приставал со scrollTop..
Всё стёр.. переписал заново.. и не ругается

А на первую часть вопроса можете ответ дать ?
Буду очень признателен

В обоих случаях $() вернёт объект с той разницей что document вернёт все что есть на странице
$() сложная штука.. я не понимаю что происходит когда я передаю весь объект document..
как она с ним работает..

Когда передан селектор $() возвращает объект с конкретными элементами DOM (HTML, body), где на них навешивается событие.

Так почему же когда я передаю эти элементы на них не проходит scroll ?

[Максим Тимофеев]

Владимир Обабков,

А ведь умная функция кушает и не давится

нет, умная как раз имеет стогую типизацию

А на первую часть вопроса можете ответ дать ?

не вижу разделения на части

Уверен, что все вопросы "почему" отпадут если прочитать до конца вот это: https://learn.javascript.ru/document (максимум час чтива)
а по прокрутке я бы еще вот это рекомендовал: https://learn.javascript.ru/metrics-window