摘要:详细文档例子一个组件子元素父元素容器不跟随滚动兼容移动端请移步使用参数描述类型可选值默认值是否阻止父级滚动是否阻止容器滚动贡献欢迎移动端的实现参考张鑫旭的移动端浮层滚动阻止窗体滚动处理
介绍
我们经常遇到一种情况。当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至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 devTHANKS
移动端的实现参考张鑫旭的web移动端浮层滚动阻止window窗体滚动JS/CSS处理
LICENSEMIT
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/92666.html
摘要:前言本来是打算写写怎么使用进行移动端的布局的然后前面还加些像素基本知识铺垫后面又加了些属性概念最后还来些常见布局问题和系统样式果然排版也是门高深学问这里有些自己写的有些看完之后总结出来的还有些别人那里搬来的顺带会送上飞机票告诉你们来源在哪 前言 本来是打算写写怎么使用 lib-flexible 进行移动端的布局的, 然后前面还加些像素基本知识铺垫, 后面又加了些 CSS 属性概念, 最...
摘要:前言本来是打算写写怎么使用进行移动端的布局的然后前面还加些像素基本知识铺垫后面又加了些属性概念最后还来些常见布局问题和系统样式果然排版也是门高深学问这里有些自己写的有些看完之后总结出来的还有些别人那里搬来的顺带会送上飞机票告诉你们来源在哪 前言 本来是打算写写怎么使用 lib-flexible 进行移动端的布局的, 然后前面还加些像素基本知识铺垫, 后面又加了些 CSS 属性概念, 最...
摘要:一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于,如果工具是以下版本,在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素,如。 一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...
摘要:一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于,如果工具是以下版本,在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素,如。 一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...
阅读 3284·2021-09-30 09:54
阅读 3752·2021-09-22 15:01
阅读 3088·2021-08-27 16:19
阅读 2550·2019-08-29 18:39
阅读 2077·2019-08-29 14:09
阅读 600·2019-08-26 10:23
阅读 1312·2019-08-23 12:01
阅读 1828·2019-08-22 13:57