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

<h2>介绍</h2> <p>我们经常遇到一种情况。当滑动滚动条区域时，子元素滚动条到底部或顶部时就会触发父级滚动条，父级滚动条同理会继续向上触发，直至body容器。这是浏览器默认的滚动行为。</p> <p>但是很多情况，我们想要子元素滚动完成后，不触发父元素的滚动，比如 modal、侧边栏等等。</p> <a href="http://www.jqhtml.com/19132.html" target="_blank">深入研究-webkit-overflow-scrolling:touch及ios滚动</a> <h2>详细文档 & 例子</h2> <p><a href="https://smackgg.github.io/vue-scroll-lock" rel="nofollow noreferrer">Document & Demo</a></p> <h2>vue-scroll-lock</h2> <p>一个 VUE 组件：子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）</p> <p>【 React 请移步 <a href="https://github.com/orteth01/react-scroll-lock-component" rel="nofollow noreferrer">react-scroll-lock-component</a> 】</p> <h2>使用</h2> ``` npm install vue-scroll-lock --save // or yarn add vue-scroll-lock ```

// main.js
import VueScrollLock from 'vue-scroll-lock'

Vue.use(VueScrollLock)

// ***.vue
&lt;scroll-lock&gt;
  &lt;div class="content"&gt;
    // ...something
  &lt;/div&gt;
&lt;/scroll-lock&gt;

<table> <thead><tr> <th>参数</th> <th>描述</th> <th>类型</th> <th>可选值</th> <th>默认值</th> </tr></thead> <tbody> <tr> <td>lock</td> <td>是否阻止父级滚动</td> <td>Boolean</td> <td>true/false</td> <td>true</td> </tr> <tr> <td>bodyLock</td> <td>是否阻止body容器滚动</td> <td>Boolean</td> <td>true/false</td> <td>false</td> </tr> </tbody> </table> <h2>贡献</h2> <p>欢迎 Star、PR</p>

// install
npm install | yarn

// dev
npm run dev

<h2>THANKS</h2> <p>移动端的实现参考张鑫旭的<a href="http://www.zhangxinxu.com/wordpress/2016/12/web-mobile-scroll-prevent-window-js-css/" rel="nofollow noreferrer">web移动端浮层滚动阻止window窗体滚动JS/CSS处理</a></p> <h2>LICENSE</h2> <p>MIT</p>

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

来源：oschina

链接：https://my.oschina.net/u/4276348/blog/3752543

标签

react

github

Amp

Vue.js

javascript