首页 > 其他分享 >h5页面在ios上无法滑动与z-index无效的情况

h5页面在ios上无法滑动与z-index无效的情况

时间:2022-10-19 15:38:39浏览次数:42  
标签:index translateZ mo ios transform h5 zindex 滑动

ps:俩问题产生的原因是引用了scroll.js文件

问题一:无法滑动

scroll.js文件禁用了滑动事件,在不需要scroll方法的时候,解除禁用即可。

      /***滑动限制***/
      stop(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
      },
      /***取消滑动限制***/
      move(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove",mo,false);
      }
      

问题二:z-index失效问题

罪魁祸首就是它=====>iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效

scroll.js这个插件的样式中,给body加了这个属性,会导致z-index无效,被这个问题卡了好久。。。

将这个属性更改一下就可以解决z-index失效的问题

解决方法二:

1.在android上,如果对元素同时设置zindex和transform translateZ的值时,在显示上zindex的优先级要高于translateZ

2.在ios上,则相反,translateZ的优先级要高于zindex 3.所以最好在设置一系列元素时,zindex的值和translateZ的值应该一起逐级增长或逐级减少

-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);

 

标签:index,translateZ,mo,ios,transform,h5,zindex,滑动
From: https://www.cnblogs.com/yixiancheng/p/16806367.html

相关文章

  • video视频播放,安卓和IOS差异
    IOS默认播放大屏播放,安卓播放可以同时播放多个,因为IOS默认是大屏播放所以不存在同时播放多个视频的现象。需求1、安卓一次播放一个视频,播放一个其中一个停止播放。co......
  • iOS input 以及textarea失去焦点 无法进行输入
    百度了大部分的方法都不行后续通过跟朋友一起试验/*在css中对应的input以及textarea下添加*/input,textarea{-webkit-user-select:auto!important;}iOSi......
  • 由于FFmpeg的amerge滤镜导致的iOS中无法载入视频
    amerge引发的问题一段视频,在合成后可能需要增加一段背景音乐来烘托气氛。然而在使用amerge进行混音时,如果不小心会出现问题。例如将合成好的视频通过AirDrop发送到iOS(因为......
  • 我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制
    第三期·使用Vue3.1+TailWind.CSS+Axios+Golang+Sqlite3实现简单评论机制效果图CommentArea.vue我们需要借助js的Data对象把毫秒时间戳转化成UTCStrin......
  • vue之axios
    什么是axios?Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。特性1从浏览器中创建XMLHttpRequests2从node.js创建http请求3支持PromiseAPI4......
  • 我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制
    第三期·使用Vue3.1+Axios+Golang+Sqlite3实现简单评论机制效果图CommentArea.vue我们需要借助js的Data对象把毫秒时间戳转化成UTCString()。并在模板......
  • 解决ios设备软键盘弹出导致页面整体被顶起
    问题ios设备:点击input,软键盘弹出,页面整体向上偏移需求当软键盘弹起,input改变位置并始终贴着软键盘,整体页面不上移动解决页面采用flex布局<divclass="flex"><d......
  • mui组件导致ios设备无法让input获取焦点
    问题页面使用了mui组件,其中有个input标签。在IOS,macOS设备上无法通过点击让input框获得焦点,导致无法输入。原因mui.css中有个样式,让页面内容无法被选中,影响了input获取......
  • iOS Block
    http://events.jianshu.io/p/94db362acb97  Block的分类Block有三种类型:全局Block,堆区Block,栈区Block全局Block当Block没有引用到局部变量时或者Block里面使用的......
  • 【SpringMvc】项目启动成功进入index页面,但@RequestMapping注解的路径报 500
    【爱迪的懂】项目正常启动成功进入index页面,但@RequestMapping注解的路径报500【避坑!】----------------------------------------------------------------------------......