-webkit-overflow-scrolling解决移动端iOS滚动卡顿现象

最新推荐文章于 2025-05-28 11:11:33 发布

1241461622

最新推荐文章于 2025-05-28 11:11:33 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏：兼容文章标签： ios滚动卡顿移动端

本文链接：https://blog.youkuaiyun.com/qq_39635302/article/details/79477596

兼容专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用CSS3中的-webkit-overflow-scrolling属性实现触摸设备上的滚动反弹效果。通过设置此属性为'touch'，可以模拟iOS滚动行为，并提供了一个简单的HTML结构和CSS样式示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3中-webkit-overflow-scrolling使用方法

-webkit-overflow-scrolling: touch; //有回弹效果
-webkit-overflow-scrolling: auto; //滑到哪停到哪

实现滚动回弹效果的页面布局 (实战)

html

<div class="containBox no-scrollbar">
  <div>
      滚动的内容
  </div>
</div>

css

//清除滚动条
.no-scrollbar::-webkit-scrollbar{
    width: 0;
    height: 0;
}

//滚动容器
.containBox{
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow-x: hidden;
    /*overflow-y:auto;//不能写,会和下面的产生冲突*/
    -webkit-overflow-scrolling: touch;
}