【前端css】iphone webkit 如何禁止水平拖动

需求描述

在做移动端需求时碰到这样的场景，如图所示，我们需要在某个区域实现内容上下滚动,正常情况我们可以按照以下方式书写css，完全可以实现需求：

.classes-container{
overflow-x:hidden;
overflow-y: scroll;   
position:absolute;
height: 160rem;
width: 320rem;
}
复制代码

交互问题（bug）

此时我们在模拟器以及安卓手机,操作与我们期望的一致；但是在iphone的webkit浏览器，我们发现仍然可以在区域内，左右拖动，这是我们不希望出现的交互效果；

解决方案：

css中添加如下属性；

-webkit-overflow-scrolling: touch;
复制代码