DOM Event - Scroll

Devtool Chrome Event Listener


scroll is an view event that happens when the user scroll

If you want to disable scrolling, don't forget to disable the key up and down. See keydown block


Pure Javascript

  • A function that tells when the element is visible (in the view port)
function isElementVisible(el) {
    const rect = el.getBoundingClientRect(),
        vWidth = window.innerWidth || document.documentElement.clientWidth,
        vHeight = window.innerHeight || document.documentElement.clientHeight,
        efp = function (x, y) {
            return document.elementFromPoint(x, y)

    // Return false if it's not in the viewport
    if (rect.right < 0 || rect.bottom < 0
        || rect.left > vWidth || > vHeight)
        return false;

    // Return true if any of its four corners are visible
    return (
        ||  el.contains(efp(rect.right,
        ||  el.contains(efp(rect.right, rect.bottom))
        ||  el.contains(efp(rect.left,  rect.bottom))
  • Scroll is a really sensitive and CPU intensive function. Therefore, the execution of the callback function should be limited. The below example shows the use if the requestAnimationFrame that executes its own callback function either to:
let lastKnownScrollPosition = 0;
let ticking = false;

const pSelected = document.querySelectorAll('p');

document.addEventListener('scroll', function(e) {

  if (!ticking) {
    window.requestAnimationFrame(function() {
      for (i = 0; i < pSelected.length; i++) {
             let p = pSelected[i];
             if (isElementVisible(p)) {
                  p.innerHTML = '<p>'+p.innerText+' - In view</p>';
      ticking = false;

    ticking = true;
  • HTML to scroll
  • Just scroll to see the result


Extracted from the scroll jquery reference.

  • Create many p element to overflow the iframe
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
$( "p" ).clone().appendTo( document.body );
  • The real scroll work that set the display css property to inline to show the span element that is by default not displayed
$( window ).scroll(function() {
  $( "span" ).css( "display", "inline" ).fadeOut( "slow" );
  • The HTML element with the cached span element that will be revealed when scrolling and a little bit of content to overflow the iframe.
<p>p - <span>Scroll happened!</span></p>
  • The css to cache the span element
span { display: none; }
  • Just scroll the below iframe



The mouse wheel will not propagate to the parent avoiding that the page is going upward when in a textarea

Documentation / Reference

Discover More
Global Namespace Web Console Firefox
Browser - (Window | Tab) (Javascript Global scope)

window: is a javascript object that represents a tab in the whole browser that render a document. is the javascript global scope for the variable in the browser. is part of the web api holds the...
Scroll Bar
Browser - Scroll

This page is scrolling in the internet context (http, html, javascript). Scrolling is implemented by the browser in response to: user interaction (scrollbar, click) or Javascript code. Via...
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
Devtool Chrome Event Listener
Event - Category

event type are categorized further in category. Form Event Focus Event Input Devices Event View Events Example non-normative. Category Event Type Form Event submit Focus Event focus,...
HTML - Keyboard Navigation (key event)

Navigation / Manipulation of an HTML document with the keys of a keyboard. The tab key is the default key that permits to move from a interactive element to another and therefore change the focus...
How to create a Debounce Function in Javascript?

A debounce is a function that: will wrap a callback function willnot let the callback function execute for each event will let the callback function execute only when a certain amount of time...
Devtool Chrome Performance Frames
requestAnimationFrame Web Api

requestAnimationFrame is a window function that permits to run code when a frame is going to be painted. Avoiding layout shift. For instance, when you create a fixed top bar, you need to set two...

Share this page:
Follow us:
Task Runner