Scroll Monitor

ScrollMonitor is a class for monitoring and reacting to the user's scroll position.

It's easy to use: create an instance, passing it a configuration object that specifies the scroll position or distance you want to monitor and the function(s) you want to to be called, and just let it run.

For instance, this:


                    var scro_mo_1 = new ScrollMonitor({
  elem: document.getElementById('scroll-block-1'),
  pos: 'bottom',
  func_in: (function (xy) {
    document.getElementById('scroll-block-1').style.backgroundColor = 'hsl(60, 100%, 50%)';
    console.log("You've hit the bottom.");
  }),
  func_out: (function (xy) {
    document.getElementById('scroll-block-1').style.backgroundColor = 'hsl(120, 100%, 50%)';
    console.log("You're heading back up!");
  })
});

will change the background color of this block and send messages to your console when you scroll to the bottom of this block, and again when you scroll back up.

This:


                    var scro_mo_2 = new ScrollMonitor({
  elem: document.getElementById('scroll-block-2'),
  pos: 'y',
  dist: 100,
  func_in: (function (xy) {
    document.getElementById('scroll-block-2').style.backgroundColor = 'hsl(120, 100%, 50%)';
    console.log("You're near the top or bottom.");
  }),
  func_out: (function (xy) {
    document.getElementById('scroll-block-2').style.backgroundColor = 'hsl(180, 100%, 50%)';
    console.log("You're not near near the top or bottom.");
  })
});

will change the background color of the block when your scroll position is within 100 pixels of the top of bottom of the block, and again when you scroll away from that buffer.

This:


                    var scro_mo_3 = new ScrollMonitor({
  elem: document.getElementById('scroll-block-3'),
  dir: 'y',
  dist: 100,
  func: (function (xy) {
    console.log("You scrolled 100 pixels down or up.");
    var elem = document.getElementById('scroll-block-3'),
        classes = elem.className;
    if (classes.split(' ').indexOf('purple') == -1) {
        elem.className = classes + ' purple';
    } else {
        elem.className = classes.replace(/purple/, '').trim();
    }
  }),
});

will change the background color of the block when you scroll 100 pixels either down or up.

And this:


                    var scro_mo_4 = new ScrollMonitor({
  elem: document.getElementById('scroll-block-4'),
  dist: 100,
  func: (function (xy) {
    console.log("You scrolled 100 pixels in any direction.");
    var elem = document.getElementById('scroll-block-4'),
        classes = elem.className;
    if (classes.split(' ').indexOf('purple') == -1) {
        elem.className = classes + ' purple';
    } else {
        elem.className = classes.replace(/purple/, '').trim();
    }
  }),
});

will change the background color of the block when you scroll 100 pixels in any direction.

You can stop and restart the monitors.

Click this scro_mo_4.stop() to stop the block right above here from responding, and click this scro_mo_4.start() to start it again.

You can view and change the configuration parameters at any time.

Click this scro_mo_5.func(body_bg) to swap out the callback function for this block, and click this scro_mo_5.func(elem_bg) to swap it back.