Html 仅在鼠标悬停 div 时显示滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10015389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Showing scrollbars only when mouseover div
提问by Utku Dalmaz
Given this div:
鉴于此div：
<div style="overflow:auto;"></div>
How can I make the scrollbars visible only when the mouse is over the div?
仅当鼠标悬停在 div 上时，如何才能使滚动条可见？
I don't want the scrollbars to always appear. Facebook's right-top corner is an example of this.
我不希望滚动条总是出现。Facebook 的右上角就是一个例子。
回答by Stephen P
You can make overflow hidden until the mouse is over it, then make it auto. This is what I did ... note the 16px padding assumes a scrollbar is 16px wide, and is there so the text doesn't re-wrap when the scrollbar appears.
您可以隐藏溢出，直到鼠标悬停在其上方，然后将其设为自动。这就是我所做的...注意 16px 填充假设滚动条的宽度为 16px，并且在滚动条出现时文本不会重新换行。
div.myautoscroll {
height: 40ex;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
See it in action at this fiddle- you'll want to widen the right side "result" window to see the whole box, or reduce the width in the css.
在这个小提琴中查看它的实际效果- 您需要加宽右侧的“结果”窗口以查看整个框，或减小 css 中的宽度。
Edit 2014-10-23
编辑 2014-10-23
There is now more variation in how systems and browsers display scrollbars, so my 16pxspace may need to be adjusted for your case. The intent of that padding is to prevent the text from being re-flowed as the scrollbar appears and disappears.
现在系统和浏览器显示滚动条的方式有更多变化，因此我的16px空间可能需要根据您的情况进行调整。填充的目的是防止文本在滚动条出现和消失时重新流动。
Some systems, such as newer versions of Mac OS X (10.8.x at least), don't show scrollbars until you start scrollingwhich could throw this whole technique off. If the scrollbar doesn't show you may have no reason to hide it until hover, or you may want to leave overflow as autoor even scrollrather than toggling it.
某些系统，例如较新版本的 Mac OS X（至少 10.8.x），在您开始滚动之前不会显示滚动条，这可能会使整个技术失效。如果滚动条没有显示，您可能没有理由在悬停之前隐藏它，或者您可能希望将溢出保留为auto或什至scroll而不是切换它。
回答by kizu
The answer with changing overflow have a bunch of issues, like inconsistent width of the inner block, triggering of reflow, the need to have extra code for deal with paddings and without disabling keyboard (and, possibly, other) interactions when not hovered.
改变溢出的答案有很多问题，比如内部块的宽度不一致、触发回流、需要有额外的代码来处理填充并且在不悬停时不禁用键盘（以及可能的其他）交互。
There is an easier way to have the same effect that would not trigger reflow ever: using visibilityproperty and nested blocks:
有一种更简单的方法可以实现永远不会触发回流的相同效果：使用visibility属性和嵌套块：
.scrollbox {
width: 10em;
height: 10em;
overflow: auto;
visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
visibility: visible;
}
Here is a pen with a working example: http://codepen.io/kizu/pen/OyzGXY
这是一个带有工作示例的笔：http: //codepen.io/kizu/pen/OyzGXY
Another feature of this method is that visibilityis animatable, so we can add a transition to it (see the second example in the pen above). Adding a transition would be better for UX: the scrollbar won't appear immediately when hovered just while moving along to another element, and it would be harder to miss the scrollbar when targeting it with mouse cursor, as it won't hide immediately as well.
此方法的另一个特点visibility是可动画化，因此我们可以为其添加过渡（参见上面钢笔中的第二个示例）。添加过渡对 UX 会更好：滚动条在移动到另一个元素时悬停时不会立即出现，并且在使用鼠标光标定位滚动条时更难错过滚动条，因为它不会立即隐藏好。
回答by Philip Kirkbride
Try selecting the div with :hoverselector
尝试使用:hover选择器选择 div
#div { overflow: hidden; }
#div:hover { overflow:visible; }
回答by Benjamin Conant
I have had the same problem and tried a bunch of the above solutions without result. After lots of research I came to this solution. Just paste these lines into your css file.
我遇到了同样的问题并尝试了一系列上述解决方案但没有结果。经过大量研究，我找到了这个解决方案。只需将这些行粘贴到您的 css 文件中即可。
div.myautoscroll {
height: 40ex;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
What was happening to me was that Mac OSX lion and up (I am running Yosemite) auto hide scrollbars to seem more sleek. The code above overwrites the default and brings back the scrollbar ... combined with the css for changing the overflow to scroll on hover this will achieved the desired result for users on the newer mac OSXs. Here is a fiddle (not my own but the one where I found this answer). http://jsfiddle.net/simurai/UsvLN/
发生在我身上的是 Mac OSX Lion 及更高版本（我正在运行 Yosemite）自动隐藏滚动条，使其看起来更时尚。上面的代码覆盖默认值并带回滚动条......结合用于将溢出更改为悬停滚动的 css 这将为较新的 mac OSX 上的用户实现预期的结果。这是一个小提琴（不是我自己的，而是我找到这个答案的那个）。http://jsfiddle.net/simurai/UsvLN/
回答by It's me ... Alex
I came up with this solution. Basically the negative margin cuts off the vertical scrollbar.
我想出了这个解决方案。基本上负边距会切断垂直滚动条。
.hidden-scrollbar {
padding-right: 50px;
margin-right: -25px;
overflow-y: auto;
}
.hidden-scrollbar.hover-scrollbar:hover {
padding-right: 25px;
margin-right: 0;
overflow-y: auto;
}
LESS mixin
少混入
.hidden-scrollbar(@padding) {
padding-right: 2 * @padding;
margin-right: -@padding;
overflow-y: auto;
&.hover-scrollbar:hover {
padding-right: @padding;
margin-right: 0;
}
}
NOTE: @padding should be at least the scrollbar width (e.g. 25px)
注意：@padding 应该至少是滚动条宽度（例如 25px）
Basically add this to your LESS/CSS and add the class to the element that needs it's scrollbar cut off.
基本上将它添加到你的 LESS/CSS 并将类添加到需要它的滚动条切断的元素。
回答by Ram2210
If you can use css to add overflow-y hidden in the normal view.Then you can add the :hover event add overflow-y:auto.
如果你可以使用css在普通视图中添加overflow-y隐藏。那么你可以添加:hover事件添加overflow-y:auto。
If you can use Jquery use the hover event
如果您可以使用 Jquery，请使用悬停事件
Snippet:
片段：
jQuery(".main_panel").hover(
function() {
jQuery(this).addClass("show_cont");
},
function() {
jQuery(this).removeClass("show_cont");
}
);.main_panel {
width: 300px;
height: 200px;
display: block;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.limt {
padding: 0;
display: inline-block;
width: 90%;
margin: 0;
}
ul.limt li {
display: inline-block;
width: 100%;
font-size: 18px;
line-height: 28px;
}
.show_cont {
overflow-y: auto;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="main_panel">
<ul class="limt">
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
</ul>
</div>