zoukankan      html  css  js  c++  java
  • -webkit-overflow-scrolling:touch介绍和碰到的坑

    1.作用

           可控制元素在移动设备有滚动回弹效果,可惯性滚动

    2.适应场景

          在ios移动端上,设置容器overflow-y:scroll;使容器内元素滚动时,滑动会很卡顿,使用-webkit-overflow-scrolling:touch;可以解决该问题。 

         原理:该属性开启了硬件加速

         缺点:耗内存

    3.引发的bug(仅ios)

         3.1 在设置了该属性的滚动容器内手动设置scrollTop时容器会变空白,(内容绘制出错,应该是浏览器底层的问题)

         3.2 手动设置scrollTop,某些机型上的scrollTop值改变了,但是页面不滚动

         3.3 滑动时偶尔卡顿

    4.解决方案

        3.1 & 3.2(规避问题):在手动改变scrollTop前先将-webkit-overflow-scrolling属性设置为auto,scrollTop改变后再设置回touch

        3.1: 可先让页面延时100ms再滚动1px,空白可以恢复正常

        3.2:给容器的某个子元素高度加1px

        3.3:给容器设置position:static

  • 相关阅读:
    Linux常用命令琐记
    JDK 在linux下支持epoll了
    八卦
    JDK 1.6中的并发
    关于Atomic
    关于并发程序设计(二)
    关于并发程序设计 (一)
    Herb Sutter的一些观点
    想到Exchanger N parties的一种用法
    该拒绝MSN Messager了
  • 原文地址:https://www.cnblogs.com/luoyanan/p/11095643.html
Copyright © 2011-2022 走看看