详解overflow-scrolling解决滚动卡顿问题

  发布时间:2020-11-18 17:10:34   作者:chiuwingyan   我要评论
这篇文章主要介绍了详解overflow-scrolling解决滚动卡顿问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。

解决方法

以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling: touch;,是因为这行代码启用了硬件加速特性,所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题。

-webkit-overflow-scrolling: auto  |  touch;

auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止

touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

兼容写法

over-flow: auto;     /* winphone8和android4+ */
-webkit-overflow-scrolling: touch;    /* ios5+ */

ps:

1、如果添加了此属性但是不起作用,再添加overflow-y: scroll,就可以了。

2、当一个元素设置过position: absolute|relative,后再增加-webkit-overflow-scrolling: touch;属性后,会发现,滑动几次后就滚动区域会卡住,不能在滑动,这时给元素增加个z-index值就可以了。

参考文献:https://www.jianshu.com/p/1f4693d0ad2d

https://www.cnblogs.com/wuyinghong/p/7450041.html

到此这篇关于详解overflow-scrolling解决滚动卡顿问题的文章就介绍到这了,更多相关overflow-scrolling滚动卡顿内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • 详解CSS3:overflow属性

    这篇文章主要介绍了详解CSS3:overflow属性的相关资料,帮助大家更好的理解和制作CSS3特效,感兴趣的朋友可以了解下
    2020-11-17
  • 浅析CSS3 用text-overflow解决文字排版问题

    这篇文章主要介绍了CSS3 用text-overflow解决文字排版问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-10-28
  • css中overflow:hidden失效问题的解决方法

    这篇文章主要介绍了css中overflow:hidden失效问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来
    2020-02-10
  • css设置Overflow实现隐藏滚动条的同时又可以滚动

    这篇文章主要介绍了css设置Overflow实现隐藏滚动条的同时又可以滚动的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-08-27
  • css 设置overflow:scroll 滚动条的样式

    这篇文章主要介绍了css 设置overflow:scroll 滚动条的样式 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-25
  • 详解为什么设置overflow为hidden可以清除浮动带来的影响

    在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题,那么为什么设置overflow为hidden可以清除浮动带来的
    2018-11-28
  • CSS中overflow-y: visible;不起作用的原因分析及解决方法

    小编最近遇到这样的需求,移动端的h5页面,要求有一排可选择的卡片, 超出容器部分可以左右滑动,同时每张卡片左上角要有一个删除按钮。接下来通过本文给大家介绍CSS中overf
    2018-09-13
  • css中text-overflow属性与文本截断详解

    这篇文章主要给大家介绍了关于css中text-overflow属性与文本截断的相关资料,文中给出了详细的示例代码供大家参考学习,希望本文的内容对各位前端开发者们能带一定的帮助,
    2017-06-04
  • 详解CSS中zoom属性或overflow:auto属性清除浮动的作用

    这篇文章主要为大家介绍了CSS中zoom属性或overflow:auto属性清除浮动的作用,文中通过实例代码介绍的很详细,相信会对大家的理解和学习具有一定的参考借鉴价值,有需要的朋
    2016-11-26
  • 浅谈CSS中overflow清除浮动的用法

    这篇文章主要介绍了CSS中overflow清除浮动的用法,让对IE6的支持再进行最后一点续命...需要的朋友可以参考下
    2015-09-28

最新评论