当前位置: 代码迷 >> 综合 >> 移动端的坑(一)
  详细解决方案

移动端的坑(一)

热度:103   发布时间:2023-10-29 20:17:03.0

一般,我们想要禁止橡皮筋效果的话,会给document加阻止默认行为,不过新版的谷歌浏览器不已经不让这么做了,所以现在一般都是在最外层的加个div,然后给它做阻止默认行为,但是阻止了默认行为会带来以下问题

阻止默认事件带来的问题:

1)解决IOS10+ safari 以及部分安卓浏览器 不在支持 viewport的最大缩放值和禁止缩放的问题

2)解决IOS10+ safari下给body加overflow:hidden无效的问题
具体解释:给元素加了 一个绝对定位,但是元素本身没有定位父级,元素如果超出了body的宽度,body 上的overflow对这个元素,不起效果
解决办法:
给body加上一个相对定位
3)解决事件点透的问题
4)禁止mouse事件执行
5)阻止浏览器的回弹效果
6)阻止触发浏览器的滚动条
7)阻止触发系统菜单
8)阻止图片文字被选中

9)阻止input的输入

  第9个问题就比较坑爹了,input不让输入了,怎么点击也没用;一般的做法是,点击input框,打开一个新的页面,这个新的页面不要阻止默认行为;

有人说给input加阻止冒泡,这样确实可以解决问题,这个时候,输入框可以输入了,但是你再input上滑动的时候,整个页面又可以滚动了【浏览器滚动】;(如果阻止了默认行为,那么滚动的时候,我们一般都是自己写一个滚动组件的,因为阻止了默认行为浏览器的滚动已经失效了)



  相关解决方案