vue滚动条禁止_vue弹窗后如何禁止滚动条滚动?
常见场景
在许多填写表单的页面中,都会弹出一个选择器,让你在弹窗中选择项目。有时,弹窗本身容纳不下内容,需要让它不断滚动来展示,但因为事件是冒泡的,有时就会造成底部(body 的Z-index肯定是在下面的 )的内容也在滚动。这内外一起滚,就有点尴尬了。
举例,下面两张图里,都有类似的问题。那么怎么解决呢?
从event. target入手
一种思路就是从事件入手,如果事件对象不是弹窗的话,就让它什么都不做。
(其实这里有个疑惑,为什么不能通过阻止冒泡来阻止外层的body滚动呢?换了好几个事件类型都不行,不管是scroll还是touchmove,很奇怪。
实践发现,touchmove事件的确不会冒泡了,但body仍然在滚动。。。那我不就不知道事件实现的机制到底是什么了,而且用浏览器模拟的移动端,也不知道是不是模拟有误。。。
总之,event.stopPropagation() 方法在这里不是很管用。。。
)。
比如图一中的每一栏滚动条,classname为listcol,而弹窗为.listcol,那么可以这么做:
$('.box--listcol').on('touchmove', function(event) {
if(event.target.className.indexOf('listcol') === -1){
event.preventDefault()
}
});
// 忽略奇怪的缩进,直接从代码里粘贴出来的
还是直接干body吧
从event入手虽好,但那样一来,每一个弹窗都要单独绑一个事件,而且!!!很恶心的是,如果有个反人类的操作,比如内容明明无需滚动,却绑了事件,就仍然会在滚内容的时候带动外层滚动。。。。(此时内容是不会滚的,因为高度足够容纳了)。
可能表述的不是很清晰,图二中,滚动区域的classname 为 jobscrollcontainer, 弹窗本身为box–job。
$('.box--job').on('touchmove',function(e){
if(!$(e.target).parents().filter('.jobscrollcontainer').length){
e.preventDefault()
}
})
正常操作的时候是可以的。但如果不能滚动硬滚,那就抓瞎了。
所以,还是要从根子抓起,比如,就固定body不让它滚!
function toggleBody(isPin){
if(isPin){
document.body.style.height = '100vh'
document.body.style['overflow-y'] = 'hidden'
}
else{
document.body.style.height = 'unset'
document.body.style['overflow-y'] = 'auto'
}
}
toggleBody(1) //在跳出弹窗的时候
toggleBody(0) //弹窗消失的时候
超长的页面怎么办呢(2018-11更新)
上面直接限制body固然有效,但如果一个页面很长很长,超出了100vh,而我正好滚到中间时弹出弹窗。此时若直接限制body的overflow: hidden则会让页面一下弹到顶部,显然不是好的做法。那么,又该怎么做呢?
对移动端,可以引入touch-action,限制为none,在弹窗消失时再变回auto。但ios的safari上不支持该属性(可以去caniuse上查查,起码2018.11的时候还不支持)。如果我们的app在ios上用的是safari内核,就起不到效果了。
这时候,就需要结合event.preventDefault属性来用了。注意在绑定addEventListener的时候,需要多传一个options,强调这个事件不是passive的,否则谷歌等新版浏览器会报错。同时最好也指定capture: true,这样可以早点禁止该事件。
报错是Unable to preventDefault inside passive event listener due to target being treated as passive.。这是因为谷歌从chrome51之后引入的新优化。事实上,谷歌建议一般情况下,将 passive 标志添加到每个没有调用 preventDefault() 的 wheel、mousewheel、touchstart 和 touchmove 事件侦听器。但是,对于这种禁止了默认事件的eventListener,在这种情况下,反而是要强调它不是消极监听的。因为滚动都不能滚了,无所谓什么优化了。
代码如下(vue版本的):
watch: {
show(v) {
this.toggleContainerTouchAction(v)
if (v) {
document.body.addEventListener('touchmove', this.stopTouch, { passive: false, capture: true })
} else {
document.body.removeEventListener('touchmove', this.stopTouch, { capture: true })
}
},
},
methods: {
toggleContainerTouchAction(v) {
const container = document.querySelector('.container')
if (!container) {
return
}
container.style['touch-action'] = v ? 'none' : 'auto'
},
stopTouch(e) {
e.preventDefault()
},
conclusion
直接锁定body在移动端和web都适用,但如果是从事件入手的话,就要根据需要选择到底是用touch 还是 mousewheel 了。
酌情使用吧,如果一个页面中有很多不同的弹窗,那么对每一个弹窗的蹦出和消失都加上toggleBody事件也是挺烦的。。。也要考虑到用什么工具做的页面,如果是框架的话,在组件里绑会相对简洁一些。。。
vue滚动条禁止_vue弹窗后如何禁止滚动条滚动?相关推荐
- vue滚动条禁止_vue.js中实现禁止浏览器滚动方法
大家好,本次在开发项目中,点击按钮,弹出一个自定义的弹出窗口和遮罩层,因为页面的超出一屏,有滚动条,但是想让弹出窗时候,禁止浏览器滚动,那么就简单写一个方法给大家. 思路是这样的,当弹窗弹出时候,让b ...
- vue的div滚动条自动到底部_vue 每次渲染完页面后div的滚动条保持在最底部的方法...
下面我就为大家分享一篇vue 每次渲染完页面后p的滚动条保持在最底部的方法,具有很好的参考价值,希望对大家有所帮助. 实例如下: //每次页面渲染完之后滚动条在最底部updated:function( ...
- WeChat------小程序弹窗开启时禁止底部页面滚动
最近在做微信小程序的开发,涉及到自定义弹窗,然而当我的表单页面过长,同时自定义弹窗也过长,即两者都需要滚动的时候,问题出现了: 问题:当我滚动弹出窗页面时,会导致后面的页面也出现滚动的表现: ...
- 滚动条禁止_Axure 教程:不可见滚动条的页面滚动效果
在设计产品原型的过程中,经常会遇到这样的一种场景--所要展示的内容,超出了当前可视页面范围.遇到这种情况,通常使用Axure动态面板的滚动条设置来解决. 产品原型设计是产品经理每日或周期性必须经历的事 ...
- 电脑上如何禁止一切弹窗广告?永久关闭桌面弹出广告
现在日常生活工作离不开电脑,在用电脑办公的时候,弹窗广告总会打扰我们的办公,即使关闭弹窗也无用,很是让人讨厌,电脑上如何禁止一切弹窗广告?本篇教程教您如何快速关闭弹窗广告.如果您在使用电脑过程中,不小 ...
- 禁止进入activity后EditText自动获得焦点的方法
原文链接:http://blog.csdn.net/tablle/article/details/51659277 --------------------- 1.禁止进入activity后EditT ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 参考文章: (1)移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 (2)https://www.cnblogs.com/ranyon ...
- 安装搜狗输入法后如何禁止自动流氓安装搜狗浏览器等软件?
安装搜狗输入法后如何禁止自动流氓安装搜狗浏览器等软件? ©Lander Zhang 专注外企按需IT基础架构运维服务,IT Helpdesk 实战培训践行者 博客:https://blog.51cto ...
- WordPress禁止F12审查元素、禁止图片拖动、禁止Ctrl+S保存、禁止Ctrl+U查看源码、右键美化,复制弹窗提醒版权
WordPress站经常会被同行看到,辛辛苦苦上传的图片和绞尽脑汁写的文案就被同行抄走了,所以很有必要禁用右键. 纯代码无需插件,WordPress禁止F12审查元素.禁止图片拖动.禁止Ctrl+S保 ...
最新文章
- Python的setuptools详解【2】find_packages()
- 绍中考能不能用计算机了,全国计算机二级考什么内容
- 利用matlab对xml文件进行批量处理
- 【机器学习】集成学习ensemble之随机森林
- 第一章 初识 MyBatis
- 你的学习方法真的有效吗?
- html 下拉导航栏源码,html导航栏下拉菜单怎么制作?这里有详细的代码实例
- vue 中使用rem布局
- redis之消息订阅发布
- 合并pdf文件最简单的方法
- 长截图、识别图片里的文字,不用装其它软件!
- 大话USB驱动之USB键盘驱动
- 第4.1章 飞鸟集爬虫采用结巴分词随机排序存储
- php Guzzle源码,PHP Guzzle获取请求
- 【Practical】共轭
- 明日方舟登录时服务器显示泰拉,明日方舟泰拉档案馆使用说明
- qpython3可以画图吗_手机qpython3如何画图
- 【软件测试】基础-概念篇
- dd命令 刻录U盘启动
- 奔跑的微信,失控的张小龙
热门文章
- 自制反汇编逆向分析工具 迭代第六版本 (一)
- dom 无法找到 body节点问题
- ubuntu14.04安装hadoop2.7.1伪分布式和错误解决
- 关于汉语转换拼音的组件
- 移动视频监控(2)---原型开发---(音视频编解码多平台移植(for window/wince))ffmpeg --自由之路即是曲折之路。...
- 对不起,如果真是那样,由我来说出那2个字……
- 如何在labview中用c语言编程,编程语言之争:LabVIEW还是C语言?-测试测量-与非网...
- 资源放送丨《 MySQL中的索引探究 - 2020云和恩墨大讲堂》PPT视频
- 执行了rm-f,除了跑路,如何恢复?
- 深入理解 MySQL—锁、事务与并发控制