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

在this fiddle看到它的实际操作 - 您需要加宽右侧“结果”窗口以查看整个框，或减小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

尝试使用:hover选择器

选择div

#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狮子座（我正在运行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;
}

LESS mixin

.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在普通视图中添加overflow-y隐藏。然后你可以添加：hover事件add 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>

仅在mouseover div时显示滚动条

7 个答案: