一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)

阅读 1272
收藏 86
2018-01-12
原文链接:smackgg.github.io

介绍

我们经常遇到一种情况。当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至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

// install
npm install | yarn

// dev
npm run dev

THANKS

移动端的实现参考张鑫旭的web移动端浮层滚动阻止window窗体滚动JS/CSS处理

LICENSE

MIT

评论
说说你的看法