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

时间：2024-10-15 13:03:32

介绍

我们经常遇到一种情况。当滑动滚动条区域时，子元素滚动条到底部或顶部时就会触发父级滚动条，父级滚动条同理会继续向上触发，直至body容器。这是浏览器默认的滚动行为。

但是很多情况，我们想要子元素滚动完成后，不触发父元素的滚动，比如 modal、侧边栏 等等。

深入研究-webkit-overflow-scrolling:touch及ios滚动

详细文档 & 例子

Document & Demo

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

贡献

欢迎 Star、PR

// install

npm install | yarn

// dev

npm run dev

THANKS

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

LICENSE

MIT

原文地址：https://segmentfault.com/a/1190000012930548

相关文章