vue-frozen:解决移动端 fixed 定位滚动击穿的 vue 指令

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 2283 天前的主题，其中的信息可能已经有所发展或是发生改变。

在移动端开发中，fixed 布局的遮罩层滚动过程中如果滚到顶部或底部，再继续进行滚动操作会把滚动事件传递到下一层，这种问题 pc 端直接使用 overflow:hidden 就可以解决，但这个方法在移动端无法使用，移动端完美解决这个问题的方案是实时读取 touchMove 事件，在滚到顶部或底部的时候禁止事件冒泡，这里我封装了 vue-frozen，在使用过程中直接在需要禁止滚动击穿的元素上加v-frozen指令即可，有多个禁止元素可以多次使用 v-frozen。

仓库地址： https://github.com/Geocld/vue-frozen

在线 demo: http://geocld.github.io/demo/v-frozen/index.html

滚动

vue-frozen

v-frozen

fixed

4 条回复 • 2018-08-22 15:18:11 +08:00