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

Question

鉴于此div：

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

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

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

Answer 1

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

在这个小提琴中看到它的实际效果 - 你需要加宽右侧的“结果”窗口以查看整个框，或者减少 css 中的宽度。

---

编辑 2014-10-23

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

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

Answer 2

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

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

.scrollbox {
  width: 10em;
  height: 10em;
  overflow: auto;
  visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
  visibility: visible;
}

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

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

Answer 3

尝试使用选择器选择:hoverdiv

#div { overflow: hidden; }

#div:hover { overflow:visible; }

Answer 4

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

Answer 5

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

.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;
}

少混合

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

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

注意：@padding 至少应该是滚动条的宽度（例如 25px）

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

Answer 6

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

.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;
}

Answer 7

试试这个 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>

Answer 8

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

看到这个链接

---

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

看到这个小提琴

---

片段：

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>