一個 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

原文地址：http://www.javashuo.com/article/p-gaebeszr-gy.html