zoukankan      html  css  js  c++  java
  • 移动端web页面滚动不流畅,卡顿闪烁解决方案

    移动端web页面滚动不流畅,卡顿闪烁解决方案

     

    1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果:

    -webkit-overflow-scrolling: touch

    2.position属性导致的页面滚动不流畅问题:

    <div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;">
        <div style="position: relative; height: 200px;"></div>
        <div style="position: relative; height: 200px;"></div>
        <div style="position: relative; height: 200px;"></div>
    </div>

    如上代码所示,当absolute定位的容器内存在relative定位并且高度大于外置容器时,容器的滚动会出现卡顿闪烁现象,解决方法如下所示:

    复制代码
    <div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;">
        <div style="position: absolute; top: 0; left: 0;">
            <div style="position: relative; height: 200px;"></div>
            <div style="position: relative; height: 200px;"></div>
            <div style="position: relative; height: 200px;"></div>
        </div>
    </div>
    复制代码

    可以用一个absolute容器将内部relative元素包裹起来,便可解决滚动闪烁问题。

    1.当加上这个属性后,内容区域单指无法滑动必须用双指才可以,这说明你内部的内容在两个方向都能滑动,单指无法确定滑动方向,看看是不是不可滚动的方向长度给错了,或者额外添加了一些margin属性等。

    2.加上后无论怎样都不能滑动了,这也是我碰到的一个蛋疼的问题,经查是由于其他同样添加了该属性的区域干扰导致的,所以不需要的滚动区域就用display:none给去掉,去掉后就不会再影响了。不过并不是同一个页面不能共存两个使用了该属性的滚动区域,测试Demo完全可以,只要小心使用便好。​

  • 相关阅读:
    mysql优化三
    mysql优化一
    mysql索引二
    mysql索引
    php连接sql2005
    Android studio 自动导入(全部)包 import (转)
    Android启动页面的正确打开方式 (转载)
    coursera 视频总是缓冲或者无法观看的解决办法(Windows 和 Linux 系统 环境)
    最新解决 Ubuntu16.04 和 win10 双系统时间同步问题 (设置为 UTC 时间)
    2017年12月 六级成绩 留念
  • 原文地址:https://www.cnblogs.com/liaohongwei/p/9673189.html
Copyright © 2011-2022 走看看