javascript 禁止滚动条

《javascript 禁止滚动条》正文开始，本次阅读大概1分钟。

JavaScript作为前端开发中必须的一门语言，其在网页中的应用已经得到了越来越广泛的应用。不论是开发网站，还是单页应用，都离不开JavaScript。其中，禁止滚动条的需求也是非常常见。下面就让我们来详细了解一下这方面的内容。

在开发网站或者单页应用中，禁止滚动条的需求非常普遍。有时候，我们需要在模态框内弹出内容，此时禁止页面滚动，以便于用户更好地查看内容。而对于单页应用来说，有些特殊的场景下，我们也需要禁止页面的滚动。那么，要如何实现呢？总体来讲，实现的方法有三种。分别是CSS样式禁止、JS绑定和监听、api调用。下面我们将详细探讨这三种方法的实现方式及优缺点。

/* CSS样式禁止方式 */ 
.OverHidden{
overflow: hidden;
height: 100%;
}

其中CSS样式禁止是一种比较常用且简单的方式，只需要在需要禁止滚动的区域上添加CSS样式就可以实现。该方式主要是通过overflow属性来禁止滚动。同时，我们也可以通过height属性设定禁止后的区域大小，从而更好地适配页面展示。不过，该方式也有自己的缺点，无法动态调整滚动条，因此在滚动条的调节上相对较为僵硬。

/* JS绑定和监听方式 */ 
var top = 0;//禁止滚动
this.headerDom = document.getElementById('myHeader');
this.headerDom.addEventListener('touchmove', e =>{
let y = e.touches[0].clientY,
Direction = y >this.startY ? 'top' : 'bottom',
topOrBottom = Direction === 'top';
if(topOrBottom === top){
e.preventDefault();
}
}, { passive: false, capture: true });

而针对一些复杂场景，我们需要JS绑定和监听的方式来实现。通过监听touchmove事件，我们可以在需要禁止滚动区域上实现复杂的交互行为。该方式在动态调整滚动条方面，表现要更加灵活。而在实现上，设置一个标志位来控制是否需要禁止滚动即可。

/* api调用方式 */ 
document.body.style.overflow = 'hidden';

在一些场景中，我们还可以使用api调用方式来实现禁止滚动条的需求。通过设置document.body.style.overflow属性为hidden，即可快速禁止当前页面滚动。不过需要注意的是，该方式的使用范围相对有限，我们只能禁止整个页面的滚动，而无法通过该方式针对一个特定区域进行精确调节。

总的来说，针对禁止滚动条的需求，我们有三种主要的实现方式。通过CSS禁止、JS绑定和监听、api调用来实现。每种方式都有自己的优缺点，需要根据具体情况选择合适的方式来实现。不过可以确定的是，无论使用何种方式，我们都可以轻松实现页面滚动控制的需求。