介绍
我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至 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 】
文档 & 例子
Document & Demo
使用
参数 描述 类型 可选值 默认值
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
移动端的实现参考张鑫旭的 web 移动端浮层滚动阻止 window 窗体滚动 JS/CSS 处理
// install
npm install | yarn
// dev
npm run dev
THANKS
LICENSE
MIT
来源: https://juejin.im/entry/5a58701f6fb9a01cc122449e