隐藏滚动条

第三方库

在以前使用jQuery的时候有一个第三方工具JQuery-nicescroll,引入设置就能影藏滚动条，同时还可以实现滚动

现在也有了angular版本下的nicescroll

JavaScript

// 禁止鼠标滑过滚动条滚动
document.body.onmousewheel=function(){returnfalse;}// 恢复鼠标滑过滚动条滚动
document.body.onmousewheel=function(){returntrue;}// 禁止键盘控制滚动条滚动
document.body.onkeydown=function(e){if(e.keyCode==38|| e.keyCode==40){returnfalse;}}

CSS

1. 隐藏滚动条 但是无法滚动

::-webkit-scrollbar,
::-moz-scrollbar{width: 0px;overflow-x: hidden;overflow-y: hidden;}

2. 嵌套元素

<divclass="outer-container"><divclass="inner-container"><divclass="content">
            ......</div></div></div>

.outer-content{border: 5px solid #0d1e4a;position: relative;overflow: hidden;}.inner-content{position: absolute;left: 0;overflow-x: hidden;overflow-y: scroll;}.inner-content::-webkit-scrollbar{display: none;}

参考

1.js禁止滚动条滚动并且隐藏滚动条
2.3种方法实现CSS隐藏滚动条并可以滚动内容