zmp-core/esm/modules/no-bounce/no-bounce.js

Full featured mobile HTML framework for building iOS & Android apps

import { getDocument, getWindow } from 'ssr-window';
export default {
  name: 'iNoBounce',
  on: {
    init: function init() {
      var enabled = false;
      var startY = 0;
      var supportsPassiveOption = false;
      var app = this;
      var params = app.params;

      if (params && params.enableBouncing) {
        return;
      }

      var document = getDocument();
      var window = getWindow();

      try {
        var opts = Object.defineProperty({}, 'passive', {
          get: function get() {
            supportsPassiveOption = true;
          }
        });
        window.addEventListener('zmp:test', null, opts);
      } catch (e) {}

      var handleTouchmove = function handleTouchmove(e) {
        var el = e.target;
        var zoom = window.innerWidth / window.document.documentElement.clientWidth;

        if (e.touches.length > 1 || zoom !== 1) {
          return;
        }

        while (el !== document.body && el !== document) {
          var style = window.getComputedStyle(el);

          if (!style) {
            break;
          }

          if (el.nodeName === 'INPUT' && el.getAttribute('type') === 'range') {
            return;
          }

          var scrolling = style.getPropertyValue('-webkit-overflow-scrolling');
          var overflowY = style.getPropertyValue('overflow-y');
          var height = parseInt(style.getPropertyValue('height'), 10);
          var isScrollable = scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll');
          var canScroll = el.scrollHeight > el.offsetHeight;

          if (isScrollable && canScroll) {
            var curY = e.touches ? e.touches[0].screenY : e.screenY;
            var isAtTop = startY <= curY && el.scrollTop === 0;
            var isAtBottom = startY >= curY && el.scrollHeight - el.scrollTop === height;

            if (isAtTop || isAtBottom) {
              e.preventDefault();
            }

            return;
          }

          el = el.parentNode;
        }

        e.preventDefault();
      };

      var handleTouchstart = function handleTouchstart(e) {
        startY = e.touches ? e.touches[0].screenY : e.screenY;
      };

      var enable = function enable() {
        window.addEventListener('touchstart', handleTouchstart, supportsPassiveOption ? {
          passive: false
        } : false);
        window.addEventListener('touchmove', handleTouchmove, supportsPassiveOption ? {
          passive: false
        } : false);
        enabled = true;
      };

      var testDiv = document.createElement('div');
      document.documentElement.appendChild(testDiv);
      testDiv.style.WebkitOverflowScrolling = 'touch';
      var scrollSupport = 'getComputedStyle' in window && window.getComputedStyle(testDiv)['-webkit-overflow-scrolling'] === 'touch';
      document.documentElement.removeChild(testDiv);

      if (scrollSupport) {
        enable();
      }
    }
  }
};