rubber-band-effect/lib/index.js

Add rubber band effects to scrollable divs.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (element) {
  if (!document || !window) return null;else if ((0, _browserDetection.isSafari)()) return null;

  var topBuffer = document.createElement('div');
  topBuffer.style.height = '0px';
  topBuffer.style.width = '100%';

  var bottomBuffer = document.createElement('div');
  bottomBuffer.style.height = '0px';
  bottomBuffer.style.width = '100%';

  if (element.firstChild) element.insertBefore(topBuffer, element.firstChild);else element.appendChild(topBuffer);
  element.appendChild(bottomBuffer);
  element.addEventListener('wheel', function (e) {
    return handleWheel(e, element, topBuffer, bottomBuffer);
  });
};

var _browserDetection = require('./utils/browserDetection');

var bufferHeight = 1000;

var isOverscrolled = false;

function round(value) {
  if (value <= 0.95) return Math.round(value * 1000) / 1000;else if (value <= 0.975) return Math.round(value * 10000) / 10000;else return Math.round(value * 100000) / 100000;
}

function handleWheel(event, element, topBuffer, bottomBuffer) {
  if (!isOverscrolled) {
    isOverscrolled = element.scrollTop + event.deltaY < 0 || element.scrollHeight - element.scrollTop <= element.clientHeight;
  } else {
    if (element.scrollTop + event.deltaY < 0 && event.deltaY < 0) {
      var newScroll = element.scrollTop + event.deltaY + 1 - parseInt(topBuffer.style.height);
      var position = round(1 + Math.log10((bufferHeight + newScroll) / bufferHeight));
      topBuffer.style.height = bufferHeight - position * bufferHeight + 'px';
      if (bufferHeight - position * bufferHeight <= 1) {
        element.scrollTop = bufferHeight - position * bufferHeight;
      } else {
        element.scrollTop = 1;
      }
    } else if (element.scrollHeight - element.scrollTop <= element.clientHeight && event.deltaY > 0) {
      var _newScroll = event.deltaY - 1 + parseInt(bottomBuffer.style.height);
      var _position = round(1 + Math.log10((bufferHeight - _newScroll) / bufferHeight));
      bottomBuffer.style.height = bufferHeight - _position * bufferHeight + 'px';
    } else {
      isOverscrolled = false;
    }
  }
}