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

chenatu 发布于2019-08-22 13:57 / 1798人阅读

摘要：详细文档例子一个组件子元素父元素容器不跟随滚动兼容移动端请移步使用参数描述类型可选值默认值是否阻止父级滚动是否阻止容器滚动贡献欢迎移动端的实现参考张鑫旭的移动端浮层滚动阻止窗体滚动处理

介绍

我们经常遇到一种情况。当滑动滚动条区域时，子元素滚动条到底部或顶部时就会触发父级滚动条，父级滚动条同理会继续向上触发，直至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删除父元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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