原文地址


常见场景

在许多填写表单的页面中,都会弹出一个选择器,让你在弹窗中选择项目。有时,弹窗本身容纳不下内容,需要让它不断滚动来展示,但因为事件是冒泡的,有时就会造成底部(body 的Z-index肯定是在下面的 )的内容也在滚动。这内外一起滚,就有点尴尬了。

举例,下面两张图里,都有类似的问题。那么怎么解决呢?


从event. target入手

一种思路就是从事件入手,如果事件对象不是弹窗的话,就让它什么都不做。

(其实这里有个疑惑,为什么不能通过阻止冒泡来阻止外层的body滚动呢?换了好几个事件类型都不行,不管是scroll还是touchmove,很奇怪。
实践发现,touchmove事件的确不会冒泡了,但body仍然在滚动。。。那我不就不知道事件实现的机制到底是什么了,而且用浏览器模拟的移动端,也不知道是不是模拟有误。。。
总之,event.stopPropagation() 方法在这里不是很管用。。。
)。

比如图一中的每一栏滚动条,classname为listcol,而弹窗为.listcol,那么可以这么做:

  1. $('.box--listcol').on('touchmove', function(event) {
  2. if(event.target.className.indexOf('listcol') === -1){
  3. event.preventDefault()
  4. }
  5. });
  6. // 忽略奇怪的缩进,直接从代码里粘贴出来的

还是直接干body吧

从event入手虽好,但那样一来,每一个弹窗都要单独绑一个事件,而且!!!很恶心的是,如果有个反人类的操作,比如内容明明无需滚动,却绑了事件,就仍然会在滚内容的时候带动外层滚动。。。。(此时内容是不会滚的,因为高度足够容纳了)。

可能表述的不是很清晰,图二中,滚动区域的classname 为 jobscrollcontainer, 弹窗本身为box–job。


  1. $('.box--job').on('touchmove',function(e){
  2. if(!$(e.target).parents().filter('.jobscrollcontainer').length){
  3. e.preventDefault()
  4. }
  5. })

正常操作的时候是可以的。但如果不能滚动硬滚,那就抓瞎了。

所以,还是要从根子抓起,比如,就固定body不让它滚!

  1. function toggleBody(isPin){
  2. if(isPin){
  3. document.body.style.height = '100vh'
  4. document.body.style['overflow-y'] = 'hidden'
  5. }
  6. else{
  7. document.body.style.height = 'unset'
  8. document.body.style['overflow-y'] = 'auto'
  9. }
  10. }
  11. toggleBody(1) //在跳出弹窗的时候
  12. 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版本的):

  1. watch: {
  2. show(v) {
  3. this.toggleContainerTouchAction(v)
  4. if (v) {
  5. document.body.addEventListener('touchmove', this.stopTouch, { passive: false, capture: true })
  6. } else {
  7. document.body.removeEventListener('touchmove', this.stopTouch, { capture: true })
  8. }
  9. },
  10. },
  11. methods: {
  12. toggleContainerTouchAction(v) {
  13. const container = document.querySelector('.container')
  14. if (!container) {
  15. return
  16. }
  17. container.style['touch-action'] = v ? 'none' : 'auto'
  18. },
  19. stopTouch(e) {
  20. e.preventDefault()
  21. },

conclusion

直接锁定body在移动端和web都适用,但如果是从事件入手的话,就要根据需要选择到底是用touch 还是 mousewheel 了。

酌情使用吧,如果一个页面中有很多不同的弹窗,那么对每一个弹窗的蹦出和消失都加上toggleBody事件也是挺烦的。。。也要考虑到用什么工具做的页面,如果是框架的话,在组件里绑会相对简洁一些。。。


返回目录

vue弹窗后如何禁止滚动条滚动?的更多相关文章

  1. jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动

    一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...

  2. js禁止滚动条滚动,并且滚动条不消失,页面大小不变

    //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',fu ...

  3. vue 弹窗禁止底层滚动

    原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层. 处理:打开弹窗后禁止底层滚动调用stop事件,关闭则开启底层滚动调用move事件. let mo=fun ...

  4. jquery弹窗时禁止body滚动条滚动

    当弹出一个jq提示窗口的时候,一般窗口右边还会有进度条的情况,禁止进度条方法禁止浏览器滚动条滚动: $('body').css({ "overflow-x":"hidde ...

  5. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  6. 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

    PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...

  7. 移动端vue页面禁止移动/滚动

    当需要在移动端中禁止页面滚动,加入:@touchmove.prevent即可,例子如下 <template> <div @touchmove.prevent> <h3 c ...

  8. js禁止页面滚动

    开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面.如何实现呢,往下看 js实现整个页面禁止滚动: document.body.addEventListener('t ...

  9. 禁止body滚动允许div滚动防微信露底

    最近遇到一个需求,页面中只有一个div允许滚动,其他内容不允许滚动. 正常来讲加上 body{height:100%;overflow: hidden;} 应该就阻止页面滚动了.可是很悲催的是手机端并 ...

随机推荐

  1. C# 之 .net core -- EF code first连接Mysql数据库

    一.在Models 新建两个数据库类 这个是数据库需要生成的类基础(塑造外观) public class User { [Key] public string ID { get; set; } [Ma ...

  2. C# 泛型(4) 持续更新

    泛型可以创建独立于被包含类型的类和方法. C++模板与泛型相似. 泛型优点性能 System.Collections 和 System.Collections.Generic 名称空间泛型和非泛型集合 ...

  3. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  4. sql random string

    begindeclare chars_str varchar(62) default 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123 ...

  5. Python3-list

    list = ['abcd', 786, 2.23, 'runoob', 70.2] tinylist = [123, 'runoob'] print(list) # 输出完整列表 print(lis ...

  6. 【Winform-最大化窗体】Winform设置窗体最大化,填满整个屏幕

    设置窗体最大化,填满整个屏幕//this.MaximizedBounds = Screen.PrimaryScreen.WorkingArea;//this.MaximumSize = Screen. ...

  7. Eclipse 导入项目

  8. Jmeter(十三)阶梯式压测

    阶梯式压测,就是对系统的压力呈现阶梯性增加的过程,每个阶段压力值都要增加一个数量值,最终达到一个预期值.然后保持该压力值,持续运行一段时间. Jmeter中有个插件可以实现这个场景,这个插件就是:Co ...

  9. Java线程的启动和停止(一)

    如何构造线程 在运行线程之前需要先构造线程对象,线程对象的构造需要指定线程所需要的属性,比如:所属线程组.线程优先级.是否为Daemon线程等信息.下面我们看一下,java.lang.Thread中对 ...

  10. oracle面试题1

    1.题目要求 已知关系模式:S (SNO,SNAME)学生关系.SNO 为学号,SNAME 为姓名C (CNO,CNAME,CTEACHER)课程关系.CNO 为课程号,CNAME 为课程名,CTEA ...