JavaScript Scrolling
The next event we are going to look through is scroll: one of the most frequently used events in JavaScript, and not only. With the help of this event, you can react to a page or element scrolling. Here are a few pretty good things to do with it:
- Show or hide extra controls or information depending on where the user is in the document.
- Load more data, scrolling down up to the end of the page.
A small function showing the current scroll is below:
window.addEventListener('scroll', function () {
document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
});The scroll event operates on the window, as well as on scrollable elements. Window-relative coordinates of the whole document can be received as document.documentElement.getBoundingClientRect(), the bottom property can be wondow-relative coordinate of the bottom of the document.The window height can be obtained as document.documentElement.clientHeight:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Scroll page</h1>
<script>
function scrollBottom() {
while(true) {
let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
// if the user scrolled far enough (<500px to the end)
if (windowRelativeBottom > document.documentElement.clientHeight + 500) break;
document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
}
}
window.addEventListener('scroll', scrollBottom);
scrollBottom(); // init document
</script>
</body>
</html>Prevent Scrolling¶
Let’s learn to make something unscrollable.
It is not possible to prevent scrolling with event.preventDefault() in onscroll listeners. The reason is that it triggers only after the scroll has taken place. But, there is another means that can prevent scrolling - it’s using event.preventDefault() on the event, which causes the scroll. For example, the keydown event.preventDefault() for pageUp and pageDown. Adding an event handler to the mentioned events with --onto will stop the scrolling.
There is a variety of ways to start scrolling, but the most reliable one is to use the CSS overflow property.
0 Comments
CAN FEEDBACK
Emoji