html中设置上下禁止滑动事件

在html中，我们有时候需要禁止页面上下滑动的事件，可以通过以下几种方式实现：

//方式一：使用css样式设置overflow为hidden
<style>
    html,body{
        overflow:hidden;
    }
</style>

这种方式能够有效防止页面上下滑动，但是有时候会产生一种“弹跳”效果，也就是手指滑动时，页面内容会有微小的移动，造成用户体验上的不良影响。

//方式二：使用js
//防止页面上下滑动
document.body.style.overflow="hidden";
//恢复页面上下滑动
document.body.style.overflow="auto";

通过js代码，我们可以动态调整页面的滑动属性，相比于css样式，这种方式可以完全避免“弹跳”效果，但是需要加入监听事件和判断逻辑，稍微有点麻烦。

总结起来，禁止页面上下滑动的实现方式比较简单，但是需要根据实际需求进行选择，既要考虑到性能，又要保证用户体验。