zoukankan      html  css  js  c++  java
  • IOS 浏览器上设置overflow: auto 不可滚动

    项目中最近遇到一个bug,在ios上出现的问题:原页面是在某一块地方滚动,但是改版后,滚动区域改为最外层元素,最外层包裹了一层class为main的div 

    .main {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;    
    }
    

     里面是两个元素,上下布局,下面的元素本身是在自己的区域滚动,现在改为跟着上面的元素滚动,到一定距离时把tab固定在顶部。

      这个时候有一个tab,每次切换过来时都无法滚动,在本地Chorme浏览器里测试没有问题,但是发布到测试环境, 在ios上就会出现这个问题,试过很多布局和样式,都无法让它滚动,查阅资料后得知:

    safari浏览器在渲染页面元素的时候,会预先走webkit浏览器的渲染流程:

    1. 构建DOM tree
    2. 构建CSS rule tree
    3. 根据DOM和CSS tree来构建render tree
    4. 根据render tree计算页面的layout
    5. render页面

    注意在第三步和第四步的时候,safari浏览器在构建render tree的时候,会预先找到相应的overflow: scroll元素,在计算页面layout的时候,会计算父元素的高度与子元素的高度,若子元素高于父元素,则在render页面时为其建立一个原生的scrollView。

    当子元素的高度是加载后动态计算的时候,safari在加载完成之前是不会在计算在layout之内的,也就是高度为0,则子元素的高度就一定小于父元素的高度,safari不会给父元素一个原生的scrollView。

    解决方法

    当出现这种问题的时候,给子元素一个height大于等于父元素的高度,让父元素有scrollView。当子元素加载完成时,将包裹元素撑开,父元素便可以自由滚动了。但是截止目前还存在一个问题,就是这个子元素的内容有可能是空的或者高度不足以使父元素滚动,如果设置了height: 100% 这样的情况下也可以滚动,体验上有点问题。这个时候我在子元素完全加载后计算实际高度,再覆盖100%,这样就可以解决这个小问题了。

  • 相关阅读:
    ThinkPHP中的json对象
    ThinkPHP修改默认错误页面
    E签宝签署短信后回调通知数据结构示例
    E签宝电子签章接口调试请求和响应示例
    Git如何撤销本地所有的更改操作还原到更改前的代码?
    使Egg.js编写RestfulAPI接口(六)路由分组
    使用Egg.js编写RestfulAPI接口(五)资源路由配置
    使用Egg.js编写RestfulAPI接口(四)使用PostMain测试Api接口
    使用Egg.js编写RestfulAPI接口(三)编写Api接口
    使用Egg.js编写RestfulAPI接口(二)配置跨域
  • 原文地址:https://www.cnblogs.com/gwf93/p/10374392.html
Copyright © 2011-2022 走看看