A simple solution to a common scrolling problem

scroll-smoother.js

(function (global) {'use strict';
  // (C) Andrea Giammarchi @WebReflection
  // https://gist.github.com/WebReflection/ea3e833b4de07d877479
  var
    tick =  false,
    rAF  =  global.requestAnimationFrame ||
            global.webkitRequestAnimationFrame ||
            global.mozRequestAnimationFrame ||
            global.msRequestAnimationFrame ||
            global.oRequestAnimationFrame ||
            function (cb) {
                setTimeout(cb, 1000 / 60);
            },
    CE  =   global.CustomEvent ||
            function (type) {
                var e = document.createEvent('Event');
                e.initEvent(type, true, true);
                return e;
            }
  ;

  function lessGreedyScroll() {
    if (!tick) {
      tick = !tick;
      requestAnimationFrame(scroll);
    }
  }

  function scroll() {
    window.dispatchEvent(new CE('scroll:smoother'));
    tick = !tick;
  }

  global.addEventListener('mousewheel', lessGreedyScroll, true);
  global.addEventListener('scroll', lessGreedyScroll, true);

}(window));

In order to use is, simply add directly a listener without needing or repeating the requestAnimationFrame procedure.

window.addEventListener(
  'scroll:smoother',
  myScrollHandler,
  false
);

The problem is known to be present in mostly all Bootstrap parallax based templates and it's visibly evident in the test page

mousewheel hack

Please note that simply adding addEventListener('mousewheel',Object); as no-op on top of your page will somehow fix the problem at least in Chromium for Linux.