禁用橡皮筋效果，但仍然允許使用jquery滾動

Question

我正在嘗試使響應網站，但我努力如何禁用iOS設備上的橡皮筋效果。禁用它的原因是想讓它更像一個應用程序而不是一個網站。

我發現了一些代碼，但它是非常古老的，似乎沒有人會回答它，所以我把我在小提琴中得到的東西，我希望有人可以幫助。

我所追求的是一個頁面，允許用戶向下滾動，然後停止，一旦到達頂部或底部，沒有橡皮筋。

這是我發現

(function registerScrolling($) { 
var prevTouchPosition = {}, 
    scrollYClass = 'scroll-y', 
    scrollXClass = 'scroll-x', 
    searchTerms = '.' + scrollYClass + ', .' + scrollXClass; 

$('body').on('touchstart', function (e) { 
    var $scroll = $(e.target).closest(searchTerms), 
     targetTouch = e.originalEvent.targetTouches[0]; 

    // Store previous touch position if within a scroll element 
    prevTouchPosition = $scroll.length ? { x: targetTouch.pageX, y: targetTouch.pageY } : {}; 
}); 

$('body').on('touchmove', function (e) { 
var $scroll = $(e.target).closest(searchTerms), 
    targetTouch = e.originalEvent.targetTouches[0]; 

if (prevTouchPosition && $scroll.length) { 
    // Set move helper and update previous touch position 
    var move = { 
     x: targetTouch.pageX - prevTouchPosition.x, 
     y: targetTouch.pageY - prevTouchPosition.y 
    }; 
    prevTouchPosition = { x: targetTouch.pageX, y: targetTouch.pageY }; 

    // Check for scroll-y or scroll-x classes 
    if ($scroll.hasClass(scrollYClass)) { 
     var scrollHeight = $scroll[0].scrollHeight, 
      outerHeight = $scroll.outerHeight(), 

      atUpperLimit = ($scroll.scrollTop() === 0), 
      atLowerLimit = (scrollHeight - $scroll.scrollTop() === outerHeight); 

     if (scrollHeight > outerHeight) { 
      // If at either limit move 1px away to allow normal scroll behavior on future moves, 
      // but stop propagation on this move to remove limit behavior bubbling up to body 
      if (move.y > 0 && atUpperLimit) { 
       $scroll.scrollTop(1); 
       e.stopPropagation(); 
      } else if (move.y < 0 && atLowerLimit) { 
       $scroll.scrollTop($scroll.scrollTop() - 1); 
       e.stopPropagation(); 
      } 

      // If only moving right or left, prevent bad scroll. 
      if(Math.abs(move.x) > 0 && Math.abs(move.y) < 3){ 
       e.preventDefault() 
      } 

      // Normal scrolling behavior passes through 
     } else { 
      // No scrolling/adjustment when there is nothing to scroll 
      e.preventDefault(); 
     } 
    } else if ($scroll.hasClass(scrollXClass)) { 
     var scrollWidth = $scroll[0].scrollWidth, 
      outerWidth = $scroll.outerWidth(), 

      atLeftLimit = $scroll.scrollLeft() === 0, 
      atRightLimit = scrollWidth - $scroll.scrollLeft() === outerWidth; 

     if (scrollWidth > outerWidth) { 
      if (move.x > 0 && atLeftLimit) { 
       $scroll.scrollLeft(1); 
       e.stopPropagation(); 
      } else if (move.x < 0 && atRightLimit) { 
       $scroll.scrollLeft($scroll.scrollLeft() - 1); 
       e.stopPropagation(); 
      } 
      // If only moving up or down, prevent bad scroll. 
      if(Math.abs(move.y) > 0 && Math.abs(move.x) < 3){ 
       e.preventDefault(); 
      } 

      // Normal scrolling behavior passes through 
     } else { 
      // No scrolling/adjustment when there is nothing to scroll 
      e.preventDefault(); 
     } 
    } 
} else { 
    // Prevent scrolling on non-scrolling elements 
    e.preventDefault(); 
} 
}); 
})(jQuery); 

Answer 1

你也可以做到這一點的HTML + JS端的代碼，提供HTML文檔比的WebView視高不（又名window.height在JS） 。您可以在適當的時間通過在'touchmove'事件中調用preventDefault來完成此操作（即，當元素及其所有父代沒有任何內容沿用戶開始移動手指的方向滾動時）。

我將向你展示實際的代碼，不使用jQuery ......但你必須自己實現Q.addEventListener和Q.removeEventListener（或使用jQuery）。

var Q = { 
    preventTouchScrolling: function() { 
     Q.addEventListener(window, 'touchmove', _touchScrollingHandler); 
    }, 

    restoreTouchScrolling: function() { 
     Q.removeEventListener(window, 'touchmove', _touchScrollingHandler); 
    }, 
    Pointer: { 
     /** 
     * Consistently prevents the default behavior of an event across browsers 
     * @static 
     * @method preventDefault 
     * @param {Event} e Some mouse or touch event from the DOM 
     * @return {Boolean} Whether the preventDefault succeeded 
     */ 
     preventDefault: function (e) { 
      if (('cancelable' in e) && !e.cancelable) { 
       return false; 
      } 
      e.preventDefault ? e.preventDefault() : e.returnValue = false; 
      return true; 
     }, 

     /** 
     * Returns the document's scroll top in pixels, consistently across browsers 
     * @static 
     * @method scrollTop 
     * @return {Number} 
     */ 
     scrollTop: function() { 
      return window.pageYOffset || document.documentElement.scrollTop || (document.body && document.body.scrollTop); 
     }, 

     /** 
     * Returns the y coordinate of an event relative to the document 
     * @static 
     * @method getY 
     * @param {Event} e Some mouse or touch event from the DOM 
     * @return {Number} 
     */ 
     getY: function(e) { 
      var oe = e.originalEvent || e; 
      oe = (oe.touches && oe.touches.length) 
       ? oe.touches[0] 
       : (oe.changedTouches && oe.changedTouches.length 
        ? oe.changedTouches[0] 
        : oe 
       ); 
      return Math.max(0, ('pageY' in oe) ? oe.pageY : oe.clientY + Q.Pointer.scrollTop()); 
     }, 
    } 
}; 

function _touchScrollingHandler(event) { 
    var p = event.target; 
    var pos; 
    var scrollable = null; 
    do { 
     if (!p.computedStyle) { 
      continue; 
     } 
     var overflow = p.computedStyle().overflow; 
     var hiddenHeight = p.scrollHeight - p.offsetHeight; 
     var s = (['hidden', 'visible'].indexOf(overflow) < 0); 
     if ((s || p.tagName === 'HTML') && hiddenHeight > 0) { 
      if ((Q.Pointer.movement.positions.length == 1) 
      && (pos = Q.Pointer.movement.positions[0])) { 
       var sy = Q.Pointer.getY(event) 
        + Q.Pointer.scrollTop(); 
       if ((sy > pos.y && p.scrollTop == 0) 
       || (sy < pos.y && p.scrollTop >= hiddenHeight)) { 
        continue; 
       } 
      } 
      scrollable = p; 
      break; 
     } 
    } while (p = p.parentNode); 
    if (!scrollable) { 
     Q.Pointer.preventDefault(event); 
    } 
}