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

移动端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;
	    }
	 }
 }