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

chenatu 發布于2019-08-22 13:57 / 1868人閱讀

摘要：詳細文檔例子一個組件子元素父元素容器不跟隨滾動兼容移動端請移步使用參數描述類型可選值默認值是否阻止父級滾動是否阻止容器滾動貢獻歡迎移動端的實現參考張鑫旭的移動端浮層滾動阻止窗體滾動處理

介紹

我們經常遇到一種情況。當滑動滾動條區域時，子元素滾動條到底部或頂部時就會觸發父級滾動條，父級滾動條同理會繼續向上觸發，直至body容器。這是瀏覽器默認的滾動行為。

但是很多情況，我們想要子元素滾動完成后，不觸發父元素的滾動，比如 modal、側邊欄等等。

詳細文檔 & 例子

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

  
    // ...something

參數	描述	類型	可選值	默認值
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

容器云父元素元素父節點 iframe父元素 html刪除父元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92666.html

關于移動端基礎布局概念方式和常見問題總結 (不定時更新)

摘要：前言本來是打算寫寫怎么使用進行移動端的布局的然后前面還加些像素基本知識鋪墊后面又加了些屬性概念最后還來些常見布局問題和系統樣式果然排版也是門高深學問這里有些自己寫的有些看完之后總結出來的還有些別人那里搬來的順帶會送上飛機票告訴你們來源在哪前言本來是打算寫寫怎么使用 lib-flexible 進行移動端的布局的, 然后前面還加些像素基本知識鋪墊, 后面又加了些 CSS 屬性概念, 最...

chenjiang3 2019-08-30 15:44 評論0 收藏0
關于移動端基礎布局概念方式和常見問題總結 (不定時更新)

摘要：前言本來是打算寫寫怎么使用進行移動端的布局的然后前面還加些像素基本知識鋪墊后面又加了些屬性概念最后還來些常見布局問題和系統樣式果然排版也是門高深學問這里有些自己寫的有些看完之后總結出來的還有些別人那里搬來的順帶會送上飛機票告訴你們來源在哪前言本來是打算寫寫怎么使用 lib-flexible 進行移動端的布局的, 然后前面還加些像素基本知識鋪墊, 后面又加了些 CSS 屬性概念, 最...

elliott_hu 2019-08-26 10:32 評論0 收藏0
Web前端開發過程踩過的坑以及一些小方法技巧（持續更新）

摘要：一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現點擊失效的情況。對于，如果工具是以下版本，在中加入以下代碼以上的版本加入以下代碼八開發對于文件的處理問題。解決方法有給元素設置絕對定位即可。元素換成內聯元素，如。一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...

arashicage 2019-08-23 15:13 評論0 收藏0
Web前端開發過程踩過的坑以及一些小方法技巧（持續更新）

摘要：一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現點擊失效的情況。對于，如果工具是以下版本，在中加入以下代碼以上的版本加入以下代碼八開發對于文件的處理問題。解決方法有給元素設置絕對定位即可。元素換成內聯元素，如。一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...

binta 2019-08-02 14:15 評論0 收藏0