在不影响浏览的情况下隐藏垂直的滚动条的方法有哪些？

html-css012

在不影响浏览的情况下隐藏垂直的滚动条的方法有哪些？,第1张

1、完全隐藏

在<boby>里加入scroll="no"，可隐藏滚动条；

<boby scroll="no">

2、在不需要时隐藏

指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；

反之，则显示；

<boby scroll="auto">

3、另一种方法

<style type="text/css">

body {

overflow-x:hidden

overflow-y:hidden

}

</style>

<style type="text/css">

html {

overflow-x:hidden

overflow-y:hidden

}

</style>

在我们使用WINDOWS的软件的时候，跨页的时候，右侧有一个条，用于翻页。

他就是滚动条：用鼠标轮控制，用键盘控制，用鼠标拖动控制等。

滚动条由滚动滑块和滚动箭头组成

实现页与页的切换。

记录一下日常开发...

之前开发隐藏 div 滚动条，都是通过设置外出 div 为 overflow: hidden , 然后设置内层 div 的宽度略大于外层 div ，这种做法限制很多，需要确定内外层 div 的宽度，没办法自适应多种分辨率的屏幕，而且开发调试起来很麻烦。

总结一下，隐藏 div 滚动条的几种方式

有的时候总是会碰到稀奇古怪的需求，像现在就有一个判断条滚动时显示，不滚动时隐藏的。按照一般的滚动条显示隐藏需求，基本上是用css的hover属性，hover的时候显示滚动条，否则隐藏。

像滚动条的控制样式我们基本知道，看下

针对不同的浏览器，有不同的隐藏滚动条的方法，以下针对三大浏览器 chrome、ie（包括 edge）、firefox 分别叙述之：

firefox 是三者之中最麻烦的：

到此还没结束，你还要在一些地方加上 width: 100vw。

假设你的 HTML 长这样：

那你的CSS就还要再加上：

综上所述，如果你想让三大浏览器的滚动条都隐藏，并且可以卷动，那你的CSS就至少要长这样：

至于 width: 100vw要加在何处，就要看你的 HTML 结构长怎样了。

可以让读者更聚焦于内文，而不会看到滚动条很短就懒得看、跳出网页，或一心急，就把滚动条直直往下拉。换言之，就是强迫读者慢慢地把内容看完。

假如读者想往回看，可能就会要滚很久。所以，如果你想为较长的内文隐藏滚动条，建议应有导览列，让读者可以快速跳到某一处。

好了，现在我们知道滚动条隐藏了，后面就有滑动时显示滚动条，滚动条没有滑动时隐藏，获取滚动条一般是写

但是我们这里用EventTarget.addEventListener() ；同时也用到了css的calc计算属性，关于EventTarget.addEventListener()，不了解的童鞋可以仔细看看，如果已经知道的童鞋可以直接略过

方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element , Doument 和 Window 或者任何其他支持事件的对象（比如 XMLHttpRequest ）

addEventListener() 的工作原理是将实现 EventListener 的函数或对象添加到调用它的 EventTarget 上的指定事件类型的时间侦听器列表中。