一個 VUE 組件：實現子元素 scroll 父元素容器不跟隨滾動（兼容PC、移動端）

介紹

我們經常遇到一種情況。當滑動滾動條區域時，子元素滾動條到底部或頂部時就會觸發父級滾動條，父級滾動條同理會繼續向上觸發，直至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