禁止橡皮筋效果

 1 (function (global) {
 2   let startY = 0
 3   let enabled = false
 4   let supportsPassiveOption = false
 5   try {
 6     let opts = Object.defineProperty({}, 'passive', {
 7       get: function () {
 8         supportsPassiveOption = true
 9       }
10     })
11     window.addEventListener('test', null, opts)
12   } catch (e) {
13     // console.log('false')
14   }
15   const handleTouchmove = function (evt) {
16     let el = evt.target
17     let zoom = window.innerWidth / window.document.documentElement.clientWidth
18     if (evt.touches.length > 1 || zoom !== 1) {
19       return
20     }
21     while (el !== document.body && el !== document) {
22       let style = window.getComputedStyle(el)
23       if (!style) {
24         break
25       }
26       if (el.nodeName === 'INPUT' && el.getAttribute('type') === 'range') {
27         return
28       }
29       let scrolling = style.getPropertyValue('-webkit-overflow-scrolling')
30       let overflowY = style.getPropertyValue('overflow-y')
31       let height = el.clientHeight
32       // let height = parseInt(style.getPropertyValue('height'), 10)
33       let isScrollable = scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll')
34       let canScroll = el.scrollHeight > el.offsetHeight
35       if (isScrollable && canScroll) {
36         let curY = evt.touches ? evt.touches[0].screenY : evt.screenY
37         let isAtTop = (startY <= curY && el.scrollTop === 0)
38         let isAtBottom = (startY >= curY && el.scrollHeight - el.scrollTop === height)
39         if (isAtTop || isAtBottom) {
40           evt.preventDefault()
41         }
42         return
43       }
44       el = el.parentNode
45     }
46     evt.preventDefault()
47   }
48   const handleTouchstart = function (evt) {
49     startY = evt.touches ? evt.touches[0].screenY : evt.screenY
50   }
51   const enable = function () {
52     window.addEventListener('touchstart', handleTouchstart, supportsPassiveOption ? { passive: false } : false)
53     window.addEventListener('touchmove', handleTouchmove, supportsPassiveOption ? { passive: false } : false)
54     enabled = true
55   }
56   const disable = function () {
57     window.removeEventListener('touchstart', handleTouchstart, false)
58     window.removeEventListener('touchmove', handleTouchmove, false)
59     enabled = false
60   }
61   const isEnabled = function () {
62     return enabled
63   }
64   let testDiv = document.createElement('div')
65   document.documentElement.appendChild(testDiv)
66   testDiv.style.WebkitOverflowScrolling = 'touch'
67   let scrollSupport = 'getComputedStyle' in window && window.getComputedStyle(testDiv)['-webkit-overflow-scrolling'] === 'touch'
68   document.documentElement.removeChild(testDiv)
69   if (scrollSupport) {
70     enable()
71   }
72   let preventOverScroll = {
73     enable: enable,
74     disable: disable,
75     isEnabled: isEnabled
76   }
77   if (typeof module !== 'undefined' && module.exports) {
78     module.exports = preventOverScroll
79   }
80   if (typeof global.define === 'function') {
81     (function (define) {
82       define('iNoBounce', [], function () {
83         return preventOverScroll
84       })
85     }(global.define))
86   } else {
87     global.preventOverScroll = preventOverScroll
88   }
89 }(this))