h5頁面流暢滾動

ps:高必須是100%，且內部高比外部高高。

html:

class="p1scroll scrollable"

 

css:

.p1scroll {

1. overflow-y: scroll;
2. -webkit-overflow-scrolling: touch;
3. overflow-scrolling: touch;
4. position: absolute;
5. width: 100%;
6. height: 100%;

}

 

js: scroll.js

(function() {
  var selScrollable = '.scrollable';
  // Uses document because document will be topmost level in bubbling
  document.addEventListener('touchmove', function(e) {
    e.preventDefault();
  }, {passive: false});
  $('body').on('touchstart', selScrollable, function(e) {
    if (e.currentTarget.scrollTop === 0) {
      e.currentTarget.scrollTop = 1;
    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
      e.currentTarget.scrollTop -= 1;
    }
    if (e.currentTarget.scrollLeft === 0) {
      e.currentTarget.scrollLeft = 1;
    } else if (e.currentTarget.scrollWidth === e.currentTarget.scrollLeft + e.currentTarget.offsetWidth) {
      e.currentTarget.scrollLeft -= 1;
    }
  });
  $(selScrollable).on('touchmove', function(e) {
    if ($(this)[0].scrollHeight > $(this).innerHeight() || $(this)[0].scrollWidth > $(this).innerWidth()) {
      e.stopPropagation();
    }
  });
})();

(function() {
  var agent = navigator.userAgent.toLowerCase(); //檢測是否是ios
  var iLastTouch = null; //緩存上一次tap的時間
  if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) {
    document.body.addEventListener('touchend', function(event) {
      var iNow = new Date().getTime();
      iLastTouch = iLastTouch || iNow + 1 /** 第一次時將iLastTouch設爲當前時間+1 */ ;
      var delta = iNow - iLastTouch;
      if (delta < 500 && delta > 0) {
        event.preventDefault();
        return false;
      }
      iLastTouch = iNow;
    }, false);
  }
})();