介绍
我们经常遇到一种情况。当滑动滚动条区域时，子元素滚动条到底部或顶部时就会触发父级滚动条，父级滚动条同理会继续向上触发，直至body容器。这是浏览器默认的滚动行为。
但是很多情况，我们想要子元素滚动完成后，不触发父元素的滚动，比如 modal、侧边栏 等等。
例子
1. 最常见的例子
下面是很常见的滚动至边界触发父级滚动的例子。作为对比，下面将阻止滚动和未阻止滚动两种情况都列出： 滑动此区域，父级不会跟随滚动
滑动此区域，父级会跟随滚动
2. Modal（点击蓝色字体查看例子）
Demo1: 当 lock 属性为 true 时（默认）。当滑动中间内容至顶部或底部，父级不会跟着滚动；当滑动旁边模糊遮罩区域，body容器仍然会正常滚动。 Demo2: 当 lock 和 bodyLock 属性都设置为 true 时。当滑动中间内容区域至顶部或底部，父级不会跟着滚动；当滑动旁边模糊遮罩区域，body容器也不会滚动。 Demo3: 当 lock 属性为 false 时（也就是浏览器默认的表现形式）。当滑动中间内容区域至顶部或底部，都会导致触发父级页面滚动；滑动旁边模糊遮罩区域，body容器也会正常滚动。vue-scroll-lock
一个 VUE 组件：子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）
【 React 请移步 react-scroll-lock-component 】
文档 & 例子
使用
npm install vue-scroll-lock --save
// or
yarn add vue-scroll-lock
// main.js
import VueScrollLock from 'vue-scroll-lock'
Vue.use(VueScrollLock)
// ***.vue
<scroll-lock>
<div class="content">
// ...something
</div>
</scroll-lock>
| 参数 | 描述 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| lock | 是否阻止父级滚动 | Boolean | true/false | true |
| bodyLock | 是否阻止body容器滚动 | Boolean | true/false | false |
贡献
欢迎 Start、PR
// install
npm install | yarn
// dev
npm run dev
THANKS
移动端的实现参考张鑫旭的web移动端浮层滚动阻止window窗体滚动JS/CSS处理
LICENSE
MIT
