Perform Action On Scroll Of Div (Not Document/Window)

This snippet shows how to use the scrolling of one container (which isn’t the window or document) to perform some sort of action. This is useful for web apps that will be used on mobile devices as there are often scrollable fixed-height containers in mobile/web apps.

The JavaScript

"use strict";

const containerScroll = {
  init() {
    this.$container = $("#container");
    this.scroll();
  },
  scroll() {
    this.$container.on("scroll", function() {
      // if container is scroll more than 100px
      if ($(this).scrollTop() > 100) {
        // do something
      } else {
        // do something else
      }
    });
  }
};

containerScroll.init();

Demo

See the Pen Perform Action On Scroll Of Div (Not Document/Window) by Mike Doubintchik (@allurewebsolutions) on CodePen.