• iOS overflow: scroll 不能滚动


    问题:web页面在Android和PC浏览器可以滚动,在iOS端不能滚动。这里的iOS不是iphone的safari浏览器,而是iOS端打包的APP内不能滚动。

    网上的一些解决方法:

    为overflow: scroll元素增加属性 -webkit-overflow-scrolling: touch

    给子元素设置最小高度: min-height:101%   或者设置子元素高度 height:calc(100% + 1px)

    webkit-overflow-scrolling:touch属性的下一层子元素上,将height加1%或1px。从而主动触发scrollbar

    main-inner {
    	min-height: calc(100% + 1px)
    }
    

    你也可以直接加伪元素上:

    main:after {
    	min-height: calc(100% + 1px)
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style>
            html,
            body {
                height: 100%;
            }
    
            body {
                display: flex;
            }
    
            .div-outer {
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
            }
        </style>
    </head>
    
    <body>
        <div class="div-outer">
            <!---code...-->
        </div>
    </body>
    
    </html>

    解决方法:设置网页高度100%,然后使用flex布局。子元素的voerflow:scroll属性增加 -webkit-overflow-scrolling: touch

    end.


    其中原理这篇讲的通透:https://segmentfault.com/a/1190000012761272

    描述

    此bug出现需要条件:父元素需使用绝对定位absolute或固定定位fixed,使用overflow: scroll / auto(或overflow-y: scroll / auto),内部子元素是动态大小(例如较大的svg document,近似为内嵌iframe,等等)。

    bug出现原因:没有相关官方文档描述该bug。在查阅文档及自己测试的时候总结:iOS safari 会将overflow:scroll的元素识别为一个单独的 ScrollView,并予以一个 -webkit-overflow-scrolling 属性为auto。而safari中的网页本身就是一个大的ScrollView,在脱离文档流的定位时,子元素的高度如果没有在ScrollView建立之前确定,就不会触发内部滑动,而会触发外部滑动。

    关于 -webkit-overflow-scrolling:Safari CSS Reference官方是这样描述的:

    Specifies whether to use native-style scrolling in an overflow:scroll element.

    即该属性会让overflow:scroll的元素拥有像iOS原生一样顺滑的滑动效果。为了实现此目标,safari将所有overflow:scroll的元素用原生创建一个ScrollView,当-webkit-overflow-scrolling属性为touch时,启用硬件加速,出现顺滑效果。

    分析

    1. 父元素不脱离文档流时,无此bug。
    2. 父元素在不指定 -webkit-overflow-scrolling:touch时必定出现无法滑动的问题。
    3. 当内部元素为正常的html元素时,无此bug。
    4. 当为父元素重新设置overflow属性时,可能会导致safari重建ScrollView而bug消失。(之前版本的实验室用这种方法解决的,但新海外版不能用这种方法fix,所以是可能)

    解决方法:

    据以上分析以及大量测试得出完美解决方法为:

    1. 必须为所有在移动端的overflow: scroll元素增加属性 -webkit-overflow-scrolling: touch。
    2. 当父元素可不脱离文档流时不要脱离文档流。
    3. 在子元素iframe加载完成后可异步将父元素的overflow: scroll属性重写(此方法可能不成功)。
    4. 如以上没有解决,则给予子元素一个min-height,大小不限(略大于效果最好),帮助safari建立ScrollView(亲测最有效)。
  • 相关阅读:
    让元素水平和垂直居中的方法总结
    a标签常见问题
    centos7的安装
    java面向对象-类的定义
    java内存划分
    java基础知识点-数组
    java基础知识点-重载
    第一章:服务器的组成知识点
    java 第二天运算符及录入函数Scanner
    java第一天 数据类型、变量的命名、类型的转换
  • 原文地址:https://www.cnblogs.com/sener/p/15128778.html
Copyright © 2020-2023  润新知