CSS 使滚动条仅在 Div 悬停时可见？

Make scrollbars only visible when a Div is hovered over?

提问by JasonDavis

I am trying to figure out how to have a scrollable div that only shows its scrollbars when Hovered.

我试图弄清楚如何拥有一个仅在悬停时显示其滚动条的可滚动 div。

Example is Google Image search, in the image below you can see how the left sidebar does not appear to be scroll-able until you hover the mouse over it.

示例是 Google 图片搜索，在下图中，您可以看到左侧边栏如何在您将鼠标悬停在其上方之前似乎无法滚动。

Is this possible with CSS or is Javascript required? If possible maybe a quick example how to do such a task?

这可以通过 CSS 实现还是需要 Javascript？如果可能的话，也许是一个如何完成这样一项任务的快速示例？

回答by Calvin Froedge

div {
  height: 100px;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
}

div:hover {
  overflow-y: scroll;
}

<div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

Would something like that work?

这样的事情会奏效吗？

回答by kizu

The answer with changing overflow have a bunch of issues, like inconsistent width of the inner block and triggering of reflow.

改变溢出的答案有很多问题，比如内部块的宽度不一致和触发回流。

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,
.scrollbox:focus {
  visibility: visible;
}

.scrollbox_delayed {
  transition: visibility 0.2s;
}

.scrollbox_delayed:hover {
  transition: visibility 0s 0.2s;
}

<h2>Hover it</h2>
<div class="scrollbox" tabindex="0">
  <div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>

<h2>With delay</h2>
<div class="scrollbox scrollbox_delayed" tabindex="0">
  <div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>

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 Alex Tarkowski

One trick for this, for webkit browsers, is to create an invisible scrollbar, and then make it appear on hover. This method does not affect the scrolling area width as the space needed for the scrollbar is already there.

对于 webkit 浏览器，一个技巧是创建一个不可见的滚动条，然后让它在悬停时出现。此方法不会影响滚动区域宽度，因为滚动条所需的空间已经存在。

Something like this:

像这样的东西：

body {
  height: 500px;
  &::-webkit-scrollbar {
    background-color: transparent;
    width: 10px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

body:hover {
  &::-webkit-scrollbar-thumb {
    background-color: black;
  }
}

.full-width {
  width: 100%;
  background: blue;
  padding: 30px;
  color: white;
}

some content here

<div class="full-width">does not change</div>

回答by Derk Arts

I think something like

我认为类似

$("#leftDiv").mouseover(function(){$(this).css("overflow","scroll");});
$("#leftDiv").mouseout(function(){$(this).css("overflow","hidden");});

回答by Virendra

Give the div a fixed height and srcoll:hidden; and on hover change the scroll to auto;

给 div 一个固定的高度和 srcoll:hidden; 并在悬停时将滚动更改为自动；

#test_scroll{ height:300px; overflow:hidden;}
#test_scroll:hover{overflow-y:auto;}

Here is an example. http://jsfiddle.net/Lywpk/

这是一个例子。http://jsfiddle.net/Lywpk/

回答by Fabio Nolasco

If you are only concern about showing/hiding, this code would work just fine:

如果您只关心显示/隐藏，则此代码可以正常工作：

$("#leftDiv").hover(function(){$(this).css("overflow","scroll");},function(){$(this).css("overflow","hidden");});

However, it might modify some elements in your design, in case you are using width=100%, considering that when you hide the scrollbar, it creates a little bit of more room for your width.

但是，它可能会修改您设计中的某些元素，如果您使用 width=100%，考虑到当您隐藏滚动条时，它会为您的宽度创造更多空间。

回答by Jamil Moughal

This will work:

这将起作用：

#div{
     max-height:300px;
     overflow:hidden;
}
#div:hover{
     overflow-y:scroll;
}

回答by Kalim ul Haq

Answer by @Calvin Froedgeis the shortest answer but have an issue also mentioned by @kizu. Due to inconsistent width of the div the div will flick on hover. To solve this issue add minus margin to the right on hover

通过回答@Calvin Froedge是最短的答案，但有也提到一个问题@kizu。由于 div 的宽度不一致，div 将在悬停时轻弹。要解决此问题，请在悬停时向右侧添加负边距

#div { 
     overflow:hidden;
     height:whatever px; 
}
#div:hover { 
     overflow-y:scroll; 
     margin-right: -15px; // adjust according to scrollbar width  
}