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

› Vue.js

This topic created in 2820 days ago, the information mentioned may be changed or developed.

在移动端开发中，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 replies • 2018-08-22 15:18:11 +08:00