HTML5移动端学习/采坑笔记_h5选项卡超出滑动-优快云博客

本文链接：https://blog.youkuaiyun.com/chenjycm/article/details/80262717

本文介绍了移动端H5开发中常见的问题及解决方案，包括iOS Safari自定义弹窗定位问题、隐藏滚动条、禁用图片预览、使用Flex布局快速实现上中下结构以及解决CSS3动画闪动等问题。

1、移动端H5，iOS的safari自定义弹窗定位fixed不可用：

问题情境：设定弹窗（遮罩层+内容）位置为poistion: fixed，页面内容多超过了屏幕高度，浏览器可以滚动的。在pc端，弹窗弹出时弹窗遮罩层覆盖了屏幕可见区域，显示正常，在安卓手机显示正常。问题来了，在iOS的safari上弹窗遮罩层会跑到div的顶部，也就是说在页面最后面进行弹窗，遮罩层看不到，将页面滑到最顶部才看得到弹窗遮罩层。也就是说poistion: fixed没有预期的固定定位效果，只有绝对定位效果。

如何解决：将主要内容设定为屏幕高度html,body,内容 height: 100%，内容超出便滚动overflow-y: auto,弹窗弹出就能照住所有内容，弹窗positon用absolute或者fixed都可以实现效果。

safari的position: fixed究竟有什么效果？我们在移动端滑动往下滑动，页面顶部的内容出现，继续往下滑，整个html似乎会被往下拖拽，顶部与屏幕之间产生弹性间隙，我们将页面内容加入position: fixed后，内容就被固定住了，不会出现这个间隙。

将主要内容以absolute定位，overflow-y:auto，弹窗也用position:absolute，而不能用fixed。

2、移动端隐藏滚动条：

 div::-webkit-scrollbar{
     display: none;
 }

也可以尝试属性width:0; height:0

3、移动端禁用点击图片弹出图片预览：（三种方法）

（1）css样式中禁用点击： pointer-event:none;

（2）在img元素上添加οnclick="return false";

<img src="img.png" onclick="return false">

（3）在css中写入，以背景图的方式插入图片，这种方式用户无法选中图片，自然也不会弹出图片预览。

img{
    background: url(img.png) no-repeat center;
}

（4）在js中阻止默认事件的方法，阻止点击后自动出现的图片预览事件。

var img = document.getElementById('banner');
img.addEventListener('click',function(e){
　　e.preventDefault();
});

关于这里的click事件，其实也可以是touchend事件，但是不可以是touchstart和touchmove事件！因为使用touchstart和touchmove事件的时候，假如页面顶部有个超级大的banner图，那么当横屏显示或者类似于ipad等屏幕宽度大于高度的情况下，整个banner图都占满了屏幕，这个时候页面没法滑动。因为你用touchstart和touchmove禁止掉了图片的默认行为，所以手指怎么滑动，页面都没反应的。刚好这个滑动的行为触发了touchstart和touchmove。

4、flex上中下快速布局：
要实现如下图，上下固定，中间内容可滚动，可用flex布局分分钟就设置好，给容器container属性display：flex； flex-direction: column让内容从上往下排列，给header和footer固定高度，再给中间内容加flex:1;overflow-y:auto，这样就实现布局啦！比那些设置positon...啥啥的方便多了，主要还是移动端对flex支持好。我们再讲container加position:fixed（参考问题1），滑动就可以将整个内容固定，不会出现上下的超出空隙

html:

<body>
    <div class="container">
        <header class="header">
            <div>
                大胆的标题
            </div>
        </header>
        <div class="content">            
            <p>中间好多内容</p>
            <p>就是有很多</p>            
        </div>
        <footer class="footer">
            <div>渺小的足迹</div>
        </footer>
    </div>
</body>

css:

 html, body{
      margin: 0;
      padding: 0;
      height: 100%;            
 }
 html{
      max-width: 650px;
      margin: 0 auto;
 }
 .container{
      height: 100%;
      width: 100%;
      background: #c5c5c5;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      position: fixed;

  }
  .header, .footer{
      height: 50px;
      width: 100%;
      background: #F9CC9D;
  }
  .content{
      flex: 1;
      overflow: auto;
   }
  .content p{
      padding: 20px 0;
  }
  .content::-webkit-scrollbar{
      display: none;
  }

5. 部分webkit内核手机浏览器CSS3动画出现闪动的情况
（1）首次渲染问题。在使用transform:translate属性时，会出现闪烁现象，解决方案有一下几种

-webkit-backface-visibility: hidden; //隐藏转换的元素的背面

-webkit-transform-style: preserve-3d; //使被转换的子元素保留其3D转换

-webkit-transform: translate3d(0,0,0); //开启GPU硬件加速模式，使用GPU代替CPU渲染动画（）

（2）渲染结束时的问题。如果你没有特别规定动画结束后的状态的话，动画在结束后都会直接调回到动画未执行的时候的原始状态，可参考animation-fill-mode属性。