一、禁止body的滚动
在有些情况下，我们需要禁止整个页面的滚动，可以通过以下代码实现：
body{
overflow: hidden; /*隐藏滚动条*/
height: 100vh; /*设置内容区域高度为100vh*/
}
通过将body的overflow设置为hidden，将隐藏滚动条，再将内容区域的高度设置为设备视口高度（即100vh），就能够禁止整个页面的滚动了。
二、禁止部分区域的滚动
有时候，我们只需要禁止某个区域的滚动，可以通过以下代码实现：
.scroll-container{
overflow: hidden; /*隐藏滚动条*/
height: 300px; /*设置容器高度*/
}
.scroll-container .scroll-content{
overflow-y: scroll; /*允许内容垂直方向滚动*/
height: 100%; /*设置内容高度为100%*/
}
通过给容器设置overflow:hidden属性，将隐藏滚动条，再将内容区域的高度设置为容器高度即可。同时，需要给内容区域设置overflow-y属性为scroll，才能允许内容在垂直方向上滚动。
三、使用javascript禁止滚动
如果需要在特定的场景下动态地禁止滚动，可以通过javascript实现：
function preventBodyScroll() {
document.body.style.overflow = 'hidden';
}
function enableBodyScroll() {
document.body.style.overflow = '';
}
通过将body的overflow属性设置为hidden，可以禁止body的滚动，再将其设置为空字符串，即可恢复body的滚动。
四、使用插件禁止滚动
有一些插件可以帮助我们更方便地实现禁止滚动的效果，比如Iscroll、Jquery-nicescroll等。
五、注意事项
在使用以上方法禁止滚动时，需要注意以下几点：
1、在禁止滚动的同时，需要确保内容不会超出屏幕范围，否则会使部分内容无法访问。
2、在某些情况下，滚动条的出现是必要的，因此需要根据具体需求来选择是否禁止滚动。
3、如果需要恢复滚动，需要将相应的样式和属性设置为其原有值。
六、总结
以上就是CSS禁止滚动的实现方法，通过对body、部分区域、javascript和插件的介绍，可以看出禁止滚动的实现方式有很多途径。需要根据具体需求来选择最适合的方法。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/191064.html
微信扫一扫 
支付宝扫一扫 