Skip to content

Geocld/vue-frozen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-frozen

在移动端开发中,fixed布局的遮罩层滚动过程中滚动动作会干涉到下层元素滚动,vue-frozen可以很好的解决这个问题,只需在遮罩层或者你需要禁止击穿的外层元素上使用v-frozen指令即可,由于vue-frozen基于移动端touch事件进行处理,因此不存在兼容问题,ios和Android均支持,目前该指令已经用于生产,经得住考验。

效果示例-使用前:

效果示例-使用后:

在线demo

示例参见:https://github.com/Geocld/vue-frozen/blob/master/example/index.html

使用

step-1. 使用npm:

npm install --save vue-frozen

step-2. main.js引入vue-frozen并注册:

import vueFrozen from 'vue-frozen'
Vue.use(vueFrozen);

step-3. 在需要禁止滚动击穿的元素上使用v-frozen指令:

<div class="mask" v-frozen></div>

About

📱解决移动端fixed遮罩弹窗滚动击穿的vue指令

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published