vue移动端横向滑动,vue弹窗后如何禁止滚动条滚动
本文主要介绍vue解决移动弹窗滚动渗透问题的方法，帮助大家更好的理解和使用Vue框架。感兴趣的朋友可以了解一下。
一、问题描述
在移动端的H5页面中，我们经常会遇到“点击按钮-弹出窗口-选择选项”的场景。当选项过多时，滚动到容器的底部或顶部。当你再次上下拖动滚动条时，滚动动作会穿透，底部的正文也会一起滚动。
总结：当内容滚动到容器的顶部或底部，然后强行向上或向下滚动，就发生了滚动穿透。
二、解决方案思考
参考了很多网上的解决方案，可以分为三种。经过仔细思考和分析，个人总结如下：
使用js来控制和改变css
1.弹出窗口出现
1.1.记录单击弹出按钮的滚动条。
1.2.赋予正文样式{overflow: hidden}
2.关闭弹出窗口
2.1.取消正文样式{ 溢出:隐藏 }
2.2.给出正文样式{top: scrollTop}
优点：实施简单快捷。
缺点：当弹窗打开和关闭时，如果弹窗不全窗，会看到机身闪烁。
使用js控制弹出内容区域的默认滚动事件。
1.弹出窗口出现
1.1.监听内容容器layoutBox的touchstart和touchmove事件。
1.2.监听touchstart事件，知道手指滚动内容区域的起始位置，targetY。
1.3.监听touchmove事件，了解滚动内容区域过程中改变的位置newTargetY。
1.4.获取scrolltop距容器顶部的距离/可滚动内容的scrollheight当前容器的高度clientHeight。
1.5.当滚动到顶部和底部时，阻止内容容器的默认行为。(要点)
2.弹出窗口通常是关闭的。
优点：从滚动渗透问题的源头入手，解决问题，js实现不存在ios兼容问题
缺点：根据实机验证，个别品牌机型存在兼容性问题。
弹出内容区禁止滚动，用js模拟滚动条。
1.弹出窗口出现
1.1.监视touchmove事件，以始终阻止默认行为。
1.2.侦听touchstart和touchmove事件以记录手指的移动距离，并使用transform: translate3d()属性滚动内容。
2.弹出窗口通常是关闭的。
优点：js实现没有ios兼容性问题。
缺点：ios上失去了原生滚动条的反弹体验。
三、初步实现
把它写成mixin
/**
* @作者存航_魏
* @description解决了弹窗内容区滚动到正文的问题。
* @param $refs.layoutBox需要提前指定内容容器
*/
导出默认值{
data () {
返回{
目标：0
}
},
已安装(){
如果(这个。$refs.layoutBox) {
这个。$ El . addevent listener( touch start ，this.handleTouchstart)
这个。$ El . addevent listener( touch move ，this.handleTouchmove，false)
}
},
方法：{
handleTouchstart (e) {
this . target=math . floor(e . target touches[0])。clienty)//手指的初始触摸位置
console.log(handleTouchstart ，this.targetY)
},
handleTouchmove (e) {
Layoutbox=this。$ refs.layoutbox//Content集装箱
设target=math . floor(e . target touches[0])。clienty)//手指滑动时的触摸位置
stop=layoutbox.scrolltop//The内容滚动到容器顶部的高度
let height=layoutbox.scrollheight//The内容的可滚动高度
Cliheight=当前内容容器的layoutbox.clientheight//The高度
if(sTop=0 new targety-this . targety 0 e . cancelable){
Console.log(“下拉到页面顶部”)
预防默认()
} else if(sTop=she height-cliHeight new target y-this . target y 0 e . cancelable){
Console.log(“翻到页面底部”)
预防默认()
}
}
},
销毁前(){
如果(这个。$refs.layoutBox) {
这个。$ El . removeeventlistener( touch start ，this.handleTouchstart)
这个。$ El . removeeventlistener( touch move ，this.handleTouchmove)
}
}
}
写完之后发现每次控制弹窗的滚动穿透都需要引入这个mixin文件，比较繁琐。我查了一下Vue的官方文档，找到了一个更好的方法，就是全局指令。
四、写法优化
编写一个全局命令不通过。
/**
* @作者存航_魏
* @description解决了弹窗内容区域滚到正文的问题(覆盖率90%)
**/
//@描述用法
//ul v-不通过
//李/李
//李/李
///ul
//使用vuex的保存全局变量
从“src/vuex/modules/home/state”导入状态
导出默认值{
名称：非直通，
bind:函数(el，binding) {
const handleTouchstart=函数(事件){
state . target=math . floor(event . target touches[0])。clienty)//手指的初始触摸位置
}
const handleTouchmove=function(event){
let target=math . floor(event . target coaches[0])。clienty)//手指滑动时的触摸位置
stop=el.scrolltop//Content滚动到容器顶部的高度
let height=el.scrollheight//The内容的可滚动高度
Cliheight=当前内容容器的el.clientheight//The高度
if(sTop=0 new targety-state . targety 0 event . cancelable){
Console.log(“下拉到页面顶部”)
事件. preventDefault()
} else if(sTop=s height-cliHeight new targety-state . targety 0 event . cancelable){
Console.log(“翻到页面底部”)
事件. preventDefault()
}
}
El . addevent listener( touch start ，handleTouchstart)
el.addEventListener(touchmove ，handleTouchmove，false)
},
unbind:函数(el，binding) {
//重置全局变量targetY
state.targetY=0
}
}
//最后去main.js注册一个全局指令，就可以用了。
实机测试
Ios测试通过了ios13
小米和红米手机测试通过Android 10
一加手机测试通过Android 10
华为手机测试通过emui11 Android 10
三星S8上存在兼容性问题(初步估计与三星webView的底层实现有关)
总结
解决问题的关键是清楚地知道什么时候会发生滚动渗透。
写的优化可以简化代码，让代码更优雅。
以上是vue解决移动弹窗滚动渗透的详细内容。更多关于Vue解决弹窗滚动渗透的方法，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。