DOM Event - Scroll

About

scroll is an view event that happens when the user scroll

Example

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 || rect.top > vHeight)
        return false;

    // Return true if any of its four corners are visible
    return (
        el.contains(efp(rect.left,  rect.top))
        ||  el.contains(efp(rect.right, rect.top))
        ||  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:
  • the screen’s refresh rate
  • or 60 times per second.

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

<p>1</br>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>

• Just scroll to see the result

Jquery

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

Library

Lock

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

http://mohammadyounes.github.io/jquery-scrollLock

Documentation / Reference

• https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event