仅在鼠标悬停 div 时显示滚动条

Posted 2023-03-06

【中文标题】仅在鼠标悬停 div 时显示滚动条

【英文标题】：Showing scrollbars only when mouseover div

【发布时间】：2012-04-18 09:54:52

【问题描述】：

鉴于此div：

<div style="overflow:auto;"></div>

如何使滚动条仅在鼠标悬停在 div 上时可见？

我不希望滚动条总是出现。 Facebook 的右上角就是一个例子。

【参考方案1】：

尝试使用 :hover 选择器选择 div

#div  overflow: hidden; 

#div:hover  overflow:visible; 

【参考方案2】：

您可以隐藏溢出直到鼠标悬停在它上面，然后让它自动。 这就是我所做的...注意 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;
    

在this fiddle 上查看它的实际效果 - 您需要加宽右侧的“结果”窗口以查看整个框，或者减小 css 中的宽度。

---

编辑 2014-10-23

现在系统和浏览器显示滚动条的方式有更多变化，因此我的16px 空间可能需要根据您的情况进行调整。该填充的目的是防止文本在滚动条出现和消失时重新排列。

某些系统，例如较新版本的 Mac OS X（至少 10.8.x），在您开始滚动之前不会显示滚动条，这可能会导致整个技术失效。如果滚动条没有显示，您可能没有理由在悬停之前将其隐藏，或者您可能希望将溢出保留为 auto 甚至 scroll 而不是切换它。

【讨论】：

感谢您的解决方案。我需要它来完成我的一项工作。但我有一个小问题。没有可见滚动条时使用的 16px padding-right，当滚动条可见时，它在悬停时变为 0。由于某种原因，我不想使用 16px 填充，所以我删除了它。第一次它工作正常，悬停在 div 上会带来滚动条，悬停会删除它，但还剩下 16px（我假设）的间隙。我不知道差距从哪里来。请在这里找到小提琴jsfiddle.net/9scJE

我做了这段代码来显示滚动条，不知道为什么必须放置滚动而不是自动，但这就是它的工作原理，但不知道为什么当我将鼠标悬停在该区域上时它只显示滚动条当我滚动而不是当我只是将鼠标悬停/鼠标悬停在 div 区域上时 #myautoscroll max-height: 200px; overflow-y: hidden; #myautoscroll:hover overflow-y: scroll;

【参考方案3】：

我也遇到了同样的问题，尝试了上面的一堆解决方案都没有结果。经过大量研究，我得出了这个解决方案。只需将这些行粘贴到您的 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);

发生在我身上的是 Mac OSX lion 及更高版本（我正在运行 Yosemite）自动隐藏滚动条以看起来更时尚。上面的代码覆盖了默认值并带回了滚动条......结合 css 将溢出更改为在悬停时滚动，这将为较新的 mac OSX 上的用户实现所需的结果。这是一个小提琴（不是我自己的，而是我找到这个答案的那个）。 http://jsfiddle.net/simurai/UsvLN/

【参考方案4】：

我想出了这个解决方案。基本上负边距会切断垂直滚动条。

.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 混合

.hidden-scrollbar(@padding) 
    padding-right: 2 * @padding;
    margin-right: -@padding;
    overflow-y: auto;        

    &.hover-scrollbar:hover 
        padding-right: @padding;
        margin-right: 0;
    

注意：@padding 至少应为滚动条宽度（例如 25 像素）

基本上将其添加到您的 LESS/CSS 中，并将类添加到需要它的滚动条截断的元素中。

【参考方案5】：

改变溢出的答案有很多问题，比如内部块的宽度不一致，触发回流，需要额外的代码来处理填充，并且不禁用键盘（可能还有其他）交互悬停。

有一种更简单的方法可以产生永远不会触发回流的相同效果：使用visibility 属性和嵌套块：

.scrollbox 
  width: 10em;
  height: 10em;
  overflow: auto;
  visibility: hidden;

.scrollbox-content,
.scrollbox:hover 
  visibility: visible;

这是一个带有工作示例的笔：http://codepen.io/kizu/pen/OyzGXY

这个方法的另一个特点是visibility是动画的，所以我们可以给它添加一个过渡（见上面钢笔中的第二个例子）。为 UX 添加过渡效果会更好：当鼠标悬停在移动到另一个元素时，滚动条不会立即出现，并且在使用鼠标光标定位滚动条时更难错过滚动条，因为它不会立即隐藏好吧。

【讨论】：

这种方法对我来说效果很好，而且它不会与溢出属性（以及你在那里提到的所有问题）混淆，这很好。但是上面的动画不起作用。似乎可见性无法动画化（***.com/questions/27900053/…）。不透明度可以动画，但是当我在这个设置中使用它时，.scrollbox-content 中的内容也会受到不透明度的影响（内容随着滚动条淡出）。你有没有让动画部分使用这种方法？

@rebecca 可见性是打开还是关闭。我相信 kizu 的意思是您可以使用与转换相关的延迟属性。其中一个示例在显示或隐藏滚动条之前有 200 毫秒的延迟。绝妙的解决方案，kizu。这很好地解决了这个问题。

给他们一枚奖牌。然后是另一个。一个非常干净的解决方案！

奇怪的解决方案 - 为什么不可见性：隐藏；影响滚动框 div？为什么不隐藏？

@gfels 这就是可见性的工作原理：与大多数其他属性不同，它可以“恢复”内部元素的可见性。

【参考方案6】：

如果你可以使用css添加overflow-y隐藏在普通视图中。那么你可以添加:hover事件添加overflow-y:auto。

See This Link

---

如果可以使用 Jquery，请使用悬停事件

See This Fiddle

---

片段：

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>

【讨论】：

您的解决方案已在之前的答案中描述过。请考虑删除它。

【参考方案7】：

这样怎么样，而不是移动边距/填充或可见性，只需使颜色透明并在悬停时恢复它。

.mydiv::-webkit-scrollbar-track
    background-color: transparent;

.mydiv::-webkit-scrollbar-thumb
    background-color: transparent;

.mydiv:hover::-webkit-scrollbar-thumb
    background-color: #a0a0a0;

.mydiv:hover::-webkit-scrollbar-track
    background-color: #e1e1e1;

【参考方案8】：

试试这个 CSS hack！。

.c-scroller 
  overflow: hidden;
  height: 90vh

.c-scroller-content,
.c-scroller:hover,
.c-scroller:focus 
  overflow: auto;

<div class="c-scroller">
    Item 1<br />
    Item 2<br />
    Item 3<br />
    Item 4<br />
    Item 5<br />
    Item 6<br />
    Item 7<br />
    Item 8<br />
    Item 9<br />
    Item 10<br />
    Item 11<br />
    Item 12<br />
    Item 13<br />
    Item 14<br />
    Item 15<br />
    Item 16<br />
    Item 17<br />
    Item 18<br />
    Item 19<br />
    Item 20<br />
    Item 21<br />
    Item 22<br />
    Item 23<br />
</div>