博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)
阅读量:6165 次
发布时间:2019-06-21

本文共 607 字,大约阅读时间需要 2 分钟。

介绍

我们经常遇到一种情况。当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器。这是浏览器默认的滚动行为。

但是很多情况,我们想要子元素滚动完成后,不触发父元素的滚动,比如 modal、侧边栏 等等。

详细文档 & 例子

vue-scroll-lock

一个 VUE 组件:子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)

【 React 请移步 】

使用

npm install vue-scroll-lock --save// oryarn add vue-scroll-lock
// main.jsimport VueScrollLock from 'vue-scroll-lock'Vue.use(VueScrollLock)// ***.vue
// ...something
参数 描述 类型 可选值 默认值
lock 是否阻止父级滚动 Boolean true/false true
bodyLock 是否阻止body容器滚动 Boolean true/false false

贡献

欢迎 Star、PR

// installnpm install | yarn// devnpm run dev

THANKS

移动端的实现参考张鑫旭的

LICENSE

MIT

转载地址:http://deuba.baihongyu.com/

你可能感兴趣的文章
使用局部标准差实现图像的局部对比度增强算法。
查看>>
2017-2018-1 20165313 《信息安全系统设计基础》第八周学习总结
查看>>
《代码敲不队》第四次作业:项目需求调研与分析
查看>>
菜鸡互啄队—— 团队合作
查看>>
HttpWebRequest的GetResponse或GetRequestStream偶尔超时 + 总结各种超时死掉的可能和相应的解决办法...
查看>>
SparseArray
查看>>
第二章
查看>>
android背景选择器selector用法汇总
查看>>
[转]Paul Adams:为社交设计
查看>>
showdialog弹出窗口刷新问题
查看>>
java
查看>>
Vue.js连接后台数据jsp页面  ̄▽ ̄
查看>>
关于程序的单元测试
查看>>
mysql内存优化
查看>>
都市求生日记第一篇
查看>>
Java集合---HashMap源码剖析
查看>>
SQL优化技巧
查看>>
thead 固定,tbody 超出滚动(附带改变滚动条样式)
查看>>
Dijkstra算法
查看>>
css 动画 和 响应式布局和兼容性
查看>>