介绍
我们经常遇到一种情况。当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器。这是浏览器默认的滚动行为。
但是很多情况,我们想要子元素滚动完成后,不触发父元素的滚动,比如 modal、侧边栏 等等。
详细文档 & 例子
vue-scroll-lock
一个 VUE 组件:子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)
【 React 请移步 】
使用
npm install vue-scroll-lock --save// oryarn add vue-scroll-lock
// main.jsimport VueScrollLock from 'vue-scroll-lock'Vue.use(VueScrollLock)// ***.vue // ...something
参数 | 描述 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
lock | 是否阻止父级滚动 | Boolean | true/false | true |
bodyLock | 是否阻止body容器滚动 | Boolean | true/false | false |
贡献
欢迎 Star、PR
// installnpm install | yarn// devnpm run dev
THANKS
移动端的实现参考张鑫旭的
LICENSE
MIT