css隐藏滚动条

回眸只為那壹抹淺笑 提交于 2020-01-21 03:06:11

方法一
body { margin-right: -15px; margin-bottom: -15px; }
原理:这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象;
优点:在视觉上解决了这个问题,垂直滚动根据内容自适应;
缺点:由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域。

注意:
DIV默认是没有滚动条的,如果加了滚动条样式,去掉后滚动条自然就会消失。如果是框架iframe出现的滚动条,如果要想X横向隐藏滚动条,只需要设置overflow-x:visible或overflow-x:hidden;如果想iframe出现Y纵向滚动条隐藏可以设置CSS样式overflow-y:visible或overflow-y:hidden即可隐藏滚动条。

方法2

那就是自定义滚动条的伪对象选择器::-webkit-scrollbar
chrome 和Safari

.element::-webkit-scrollbar { width: 0 !important }
IE 10+

.element { -ms-overflow-style: none; }
Firefox

.element { overflow: -moz-scrollbars-none; }

http://caibaojian.com/webkit-scrollbar.html
https://www.cnblogs.com/bydzhangxiaowei/p/9319453.html

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!