Выбор HTML-тега с JS до закрытия определенного тега

Я хотел бы понять, почему я не могу прикрепить onscroll к переменной, содержащей элемент DOM.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="height: 1000px"></div>
<script>
  $(document).ready(function() {
    var vbody = document.getElementsByTagName('body');
    vbody.onscroll = function() {
      console.log('scrolling');
    }
  });
</script>
</body>
</html>

Этот код ничего не регистрирует. Однако, если вы просто измените

vbody.onscroll

to

window.onscroll

консоль регистрирует «прокрутку», когда вы, ну, прокручиваете - как и должно быть.

Что я делаю не так? Я хотел бы добавить обработчик событий onscroll в элемент body и заставить его работать, как при использовании window.onscroll в примере.

Спасибо.


javascript jquery dom onscroll getelementsbytagname
person Jaakko Pöntinen    schedule 20.11.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Следующий код дает вам HTMLCollection.

document.getElementsByTagName('body');

Вам нужно использовать:

$(document).ready(function() {
  var vbody = document.getElementsByTagName('body')[0];
  vbody.onscroll = function() {
    console.log('scrolling');
  }
});

Или, поскольку вы используете jQuery, придерживайтесь его:

$(document).ready(function() {
  $("body").scroll(function() {
    console.log('scrolling');
  });
});
person Soolie    schedule 20.11.2017
comment
Еще более простой способ получить элемент простого тела — получить document.body вместо document.getElementsByTagName('body')[0]. - person JJWesterkamp; 20.11.2017
comment
@JeffreyWesterkamp Хорошо... Да! :) - person Soolie; 20.11.2017

arrow_upward
0
arrow_downward

Изменить var vbody = document.getElementsByTagName('body');

to var vbody = document.getElementsByTagName('body')[0];

Вам нужно добавить в конце [0], потому что document.getElementsByTagName('body') возвращает массив, и вам нужен один экземпляр тела.

person Kenan Balija    schedule 20.11.2017
comment
HTMLCollection не массив! :) - person Soolie; 20.11.2017