移动端IOS横向滑动卡顿处理

最新推荐文章于 2021-09-26 10:58:25 发布

原创最新推荐文章于 2021-09-26 10:58:25 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#IOS #横向滚动

本文介绍了一种解决移动端iOS设备上横向滑动卡顿问题的方法。通过使用-webkit-overflow-scrolling:touch属性，可以改善滑动体验，但会显示滚动条。为隐藏滚动条，建议在原有布局基础上增加一层div，利用padding调整内部元素，同时保持外层div的overflow:hidden属性。

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

移动端IOS横向滑动卡顿处理

横向滑动采用overflow-x: auto/scroll;并隐藏滚动条的形式，但是这种做法Android支持，IOS会出现滑动卡顿的现象，因此可以在之前的基础上添加-webkit-overflow-scrolling: touch，这样就不会有卡顿现象，但是这个解决后，隐藏滚动条又没了作用，所以可以通过再添加一层div，然后把内层的div用padding撑开，外层div溢出隐藏，即可隐藏滚动条

.listWrap {
	overflow:hidden; // 溢出隐藏
	height: 80px;
	.listCon {
	    height: 100%;
	    padding-bottom: 20px; // 撑开内部盒子，让滚动条的位置下移
	    box-sizing: content-box;
	    overflow: hidden;
	    overflow-x: auto; // 横向滚动
	    -webkit-overflow-scrolling: touch; // 解决IOS滚动卡顿现象
	    -webkit-transform: translateZ(0px);
	    &::-webkit-scrollbar {  // 隐藏滚动条
	      display: none;
	    }
	 }
 }