├── .gitignore
├── LocalScrollFix.js
├── README.md
├── index.html
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules/
3 | .DS_Store
4 | npm-debug.log
5 | dist/


--------------------------------------------------------------------------------
/LocalScrollFix.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * author: fa-ge
  3 |  * github: https://github.com/fa-ge/LocalScrollFix
  4 |  */
  5 | 
  6 | ;(function() {
  7 |     function createHeadTag() {
  8 |         var styleNode = document.createElement('style')
  9 |         styleNode.className = 'localscrollfix-head'
 10 |         document.head.appendChild(styleNode)
 11 |         return styleNode
 12 |     }
 13 | 
 14 |     function addStyleText(cssText) {
 15 |         var head = document.querySelector('.localscrollfix-head')
 16 |         if (head === null) {
 17 |             head = createHeadTag()
 18 |         }
 19 |         head.appendChild(document.createTextNode(cssText))
 20 |     }
 21 | 
 22 |     function isIos() {
 23 |         var UA = window.navigator.userAgent
 24 |         return (
 25 |             /(iPad).*OS\s([\d_]+)/.test(UA) || /(iPod)(.*OS\s([\d_]+))?/.test(UA) || /(iPhone\sOS)\s([\d_]+)/.test(UA)
 26 |         )
 27 |     }
 28 | 
 29 |     var LocalScrollFix = function(win) {
 30 |         var startTopScroll
 31 |         win = typeof win === 'string' ? document.querySelector(win) : win
 32 | 
 33 |         // 只在ios局部滚动的时候才会有这个bug
 34 |         if (!win || win === window || !isIos()) {
 35 |             return
 36 |         }
 37 | 
 38 |         var winStyles = window.getComputedStyle(win, null)
 39 |         var borderWidth = parseFloat(winStyles.borderBottomWidth) + parseFloat(winStyles.borderTopWidth) + 1
 40 | 
 41 |         var unique = 'localscrollfix-' + Date.now() + ~~(Math.random() * 10000000)
 42 |         win.setAttribute(unique, '')
 43 | 
 44 |         addStyleText(
 45 |             '[' +
 46 |                 unique +
 47 |                 ']:before {content:"";width: 1px;display: block;float: left;height: -webkit-calc(100% + ' +
 48 |                 borderWidth +
 49 |                 'px);height: calc(100% + ' +
 50 |                 borderWidth +
 51 |                 'px);margin-left: -1px;}' +
 52 |                 '[' +
 53 |                 unique +
 54 |                 ']:after {content:"";display: block;width: 100%;clear: both;}'
 55 |         )
 56 | 
 57 |         function scrollTopHandler() {
 58 |             startTopScroll = win.scrollTop
 59 | 
 60 |             if (startTopScroll < 1) {
 61 |                 win.scrollTop = 1
 62 |                 return
 63 |             }
 64 | 
 65 |             if (startTopScroll + win.offsetHeight >= win.scrollHeight) {
 66 |                 win.scrollTop = win.scrollHeight - win.offsetHeight - 1
 67 |                 if (win.scrollTop < 1) {
 68 |                     win.scrollTop = 1
 69 |                 }
 70 |             }
 71 |         }
 72 |         var enableScroll = true
 73 | 
 74 |         var onTouchStartWin = function() {
 75 |             enableScroll = true
 76 |             scrollTopHandler()
 77 |         }
 78 |         win.addEventListener('touchstart', onTouchStartWin, false)
 79 |         var onScrollWin = function() {
 80 |             clearTimeout(this.timer)
 81 |             this.timer = setTimeout(function() {
 82 |                 if (enableScroll) {
 83 |                     scrollTopHandler()
 84 |                     enableScroll = false
 85 |                 }
 86 |             }, 150)
 87 |         }
 88 |         win.addEventListener('scroll', onScrollWin)
 89 | 
 90 |         if (win.scrollTop < 1) {
 91 |             win.scrollTop = 1
 92 |         }
 93 | 
 94 |         return {
 95 |             destroy: function() {
 96 |                 win.removeEventListener('touchstart', onTouchStartWin, false)
 97 |                 win.removeEventListener('scroll', onScrollWin)
 98 |             },
 99 |         }
100 |     }
101 | 
102 |     if (typeof window != 'undefined' && typeof module == 'undefined') {
103 |         window.LocalScrollFix = LocalScrollFix
104 |     } else {
105 |         module.exports = LocalScrollFix
106 |     }
107 | })()
108 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # LocalScrollFix
 2 | 
 3 | 修复ios局部滚动的坑，当滚动内容未满一屏和滚动到最上方和最下方继续滚动的时候带动整个页面的滚动。
 4 | 
 5 | 见[ios局部滚动的坑及解决方案](https://zhuanlan.zhihu.com/p/24837233).
 6 | 
 7 | ### 安装
 8 | 
 9 | ```javascript
10 | npm install localscrollfix --save
11 | ```
12 | 
13 | ### 使用
14 | 
15 | ```javascript
16 | LocalScrollFix('.win')
17 | ```
18 | 
19 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>ios局部滚动的修复</title>
 7 |     <style>
 8 |         * {
 9 |             margin: 0;
10 |             padding: 0;
11 |             box-sizing:border-box;
12 |         }
13 |         html, body {
14 |             height: 100%;
15 |         }
16 |         .window {
17 |             box-sizing: border-box;
18 |             height: 100%;
19 |             width: 100%;
20 |             border: 1px solid black;
21 |             overflow: auto;
22 |             -webkit-overflow-scrolling: touch;
23 |         }
24 |        
25 |     </style>
26 | </head>
27 | <body>
28 | <div class="window">
29 |     测试
30 | </div>
31 | <script src="LocalScrollFix.js"></script>
32 | <script>
33 |     LocalScrollFix('.window')
34 | </script>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "localscrollfix",
 3 |   "version": "2.1.1",
 4 |   "description": "LocalScrollFix ios局部滚动bug",
 5 |   "main": "LocalScrollFix.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "devDependencies": {
10 |   },
11 |   "keywords": [
12 |     "LocalScrollFix",
13 |     "ScrollFix"
14 |   ],
15 |   "author": "fa-ge",
16 |   "license": "ISC",
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/fa-ge/LocalScrollFix.git"
20 |   },
21 |   "bugs": {
22 |     "url": "https://github.com/fa-ge/LocalScrollFix/issues"
23 |   },
24 |   "homepage": "https://github.com/fa-ge/LocalScrollFix#readme"
25 | }
26 | 


--------------------------------------------------------------------------------