苹果ios解决滚动出现橡皮筋回弹效果

公司有个需求，在公众号H5页面将表格进行左右两侧固定，中间滑动，在微信开发者工具上和安卓都很完美，结果在ios上出现了滑动回弹问题，十分影响用户体验。

网上查了很多办法，最多的就是下面的代码：

var dom = document.querySelector('#draw');
dom.addEventListener('touchmove', function (e) {
	 // ...这里有一些宽度计算:判断滚动宽度有没有到最左侧和最右侧，因为没效果就不具体写了
	e.preventDefault();
})

但是我的项目中还有别的滚动，即使加了判断也还是有瑕疵，最终放弃这个写法。

解决办法：

在 iOS 设备上，当用户在 Safari 或其他基于 WebKit 的浏览器中上下滑动页面时，一旦滚动超过边界，就会触发一个名为 bounces 的回弹效果。

使用overscroll-behavior进行控制滚动行为

overscroll-behavior ：使用两个关键字来指定 overscroll-behavior 分别在 x 和 y 轴的值。只用一个值的话，x 和 y 轴都被指定为该值：

• auto：默认值，当用户在滚动到容器边界时，浏览器会自动滚动页面。
• contain：设置这个值后，默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。
• none：临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止。

#draw {
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;//使滚动可以平滑
    overscroll-behavior-x: none;// 只给了x轴加了
 }

不加-webkit-overflow-scrolling: touch会导致我的固定列在滚动条的上方，很影响视觉体验