移动端阻止ios弹性滑动_如何阻止pc端，移动端的滚动

<div id='x'>
   <p> 100 行 </p>
   ...
</div>

此处会展示出一个滚动框，那么我们应该怎么阻止滚动呢？

首先肯定是用我们的CSS来实现了

#x{
  overflow:hidden;
}

这样就直接取消了滚动条，但此时依然可以通过JS来修改scrollTop

既然这样，我们用js来解决问题，我们先对scroll事件进行阻止默认动作

x.addEventListener('scroll',(e)=>{
  e.preventDefault()
})

发现用 .preventDefault() 方法行不通。然后再试试

x.addeventListener('scroll',(e)=>{
  e.stopPropagation()
})

此时发现 .stopPropagation() 方法也行不通。

通过查询MDN发现，有些事件不能阻止默认动作。

Bubbles：该事件是否可以冒泡

Cancelable：该事件是否可以阻止默认事件

因此，联想一下，scroll事件是滚动触发，所以先要有滚动才有滚动事件，要阻止滚动，可以阻止滚轮滚动。阻止 wheel 事件的默认动作

x.addEventListener('wheel',(e)=>{
  e.preventDefault()
})

现在发现滚轮的默认动作以无效,但是依然会显示滚动条，而且，可以使用鼠标点击拖滚动条来实现滚动效果。

那么，用户通过滚动条来实现滚动的，我们可以让滚动条消失在视野中就好了。

::-webkit-scrollbar{
  width:0 !important;
}

这样就让滚动条消失啦，这里我们把滚动事件分解成几个步骤，进行阻止，就实现了阻止滚动功能了。

然而，当我们把该解决方法放在移动端，又是行不通了，因为手机没有 wheel 事件，但是有touchstart 事件

x.addEventListener('touchstart',(e)=>{
  e.preventDefault()
})

这样就阻止移动端的滚动了！

Document: scroll event​developer.mozilla.org