仅当将 Div 悬停在上方时才显示滚动条？

Posted 2023-03-06

【中文标题】仅当将 Div 悬停在上方时才显示滚动条？

【英文标题】：Make scrollbars only visible when a Div is hovered over?

【发布时间】：2012-01-27 17:49:43

【问题描述】：

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

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

这可以通过 CSS 实现还是需要 javascript？如果可能的话，也许可以举个简单的例子来完成这样的任务？

【参考方案1】：

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>

这样的东西有用吗？

【讨论】：

@saratis：确实...JS Fiddle demo，尽管目前仅在 Chrome 16/WinXP 中进行了测试。

它显示滚动条，但有时滚动条下的 div 在移出鼠标后不会更新它们的宽度。它们仍然缩小，留有 scorllbar 的空白空间（在 firefox 和 chrome 上测试）

@Bakhshi 我遇到了同样的问题，我已经实现了这篇文章中解释的内容，现在它工作正常。 ***.com/questions/3485365/…

它在 Mac 上的大多数浏览器中不起作用，因为它们在滚动本身开始后开始显示滚动，但在悬停时不起作用

很抱歉让死者复活……但#div:hover overflow-y: auto; 是一个更人性化的解决方案。仅在窗口需要时才显示滚动条。

【参考方案2】：

我觉得有点像

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

【讨论】：

这比使用 Calvin 的 :hover 解决方案要昂贵得多（从性能的角度来看）。

【参考方案3】：

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

#test_scroll height:300px; overflow:hidden;
#test_scroll:hoveroverflow-y:auto;

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

【参考方案4】：

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

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

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

【参考方案5】：

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

有一种更简单的方法可以产生永远不会触发回流的相同效果：使用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>

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

【讨论】：

所以澄清一下：这涉及到为滚动条设置一个专用的 div？这是正确的做法吗？

我在这个问题上看到了多个问题，这个答案实际上很棒。它的跨浏览器兼容，整体简单而令人敬畏。

这个解决方案为我节省了很多。我花了几个小时试图让一个 div 滚动条只在悬停时显示，但试图修复悬停时的页面重新定位并不能很好地跨浏览器。这立即修复了它。谢谢！

该解决方案可能在触摸设备上存在问题。由于visibility: hidden，用户必须在滚动框内点击一次才能滚动。我的解决方案是修改如下：@media (hover: hover) .scrollbox visibility: hidden;

【参考方案6】：

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

类似这样的：

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>

【参考方案7】：

这将起作用：

#div
     max-height:300px;
     overflow:hidden;

#div:hover
     overflow-y:scroll;

【讨论】：

能否也添加详细信息？

详情？？？在第一个#div 语句中，我为 div 设置了 max-height，这样我就不能超过最大高度，并且当数据多于可滚动时。我将溢出设置为隐藏。在第二个语句中，我将 div 设置为悬停，当任何人悬停 div 时，它将显示水平滚动条。

【参考方案8】：

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

#div  
     overflow:hidden;
     height:whatever px; 

#div:hover  
     overflow-y:scroll; 
     margin-right: -15px; // adjust according to scrollbar width  

【参考方案9】：

.div::-webkit-scrollbar-thumb 
    background: transparent;


.div:hover::-webkit-scrollbar-thumb 
    background: red;

【讨论】：

这并没有回答问题，它只是改变了滚动条的颜色。此外，它仅适用于移动 WebKit 设备，仍处于草案阶段。

【参考方案10】：

这也将帮助您克服overflow: overlay 问题。

.div
      height: 300px;
      overflow: auto;
      visibility: hidden;
    

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

【参考方案11】：

div 
  height: 100px;
  width: 50%;
  margin: 0 auto;
  overflow-y: scroll;


div:hover > ::-webkit-scrollbar-thumb   
  visibility : visible;


::-webkit-scrollbar 
   width: 0.5rem;
 

::-webkit-scrollbar-track 
   margin-left: 1rem;
 

::-webkit-scrollbar-thumb 
   background: var(--dimGrayColor);
   border-radius: 1rem;
   visibility: hidden;
   transition: 0.3s all linear;

如果您在 div 中使用 overflow: hidden 属性，并且在悬停时显示 overflow-y: scroll 然后它会在 div 中产生 jerk 运动，所以这是更好的代码，我发现可以避免这种无用的运动。

【讨论】：

这个例子不起作用。见jsfiddle.net/Abeeee/dg1m7ow2/2

【参考方案12】：

由于还没提，火狐的一个css解决方案，不影响div的大小：

div 
    overflow-y: scroll;
    /* Sets Color to Transparent for both the track and the thumb */
    scrollbar-color: transparent transparent;
    /* Optional, provides a smooth transition */
    transition: scrollbar-color .25s ease-in-out;


div:hover 
    /* Sets the color back to the default value. You can choose a different color */
    scrollbar-color: initial;

为了兼容性，您可以将其与 ::webkit-scrollbar 属性（已在此处回答）一起使用。

【参考方案13】：

这是另一个版本的最小自动隐藏滚动条，没有与使用 overflow:hidden; 相关的问题

.minimal-scrollbars
  scrollbar-width: thin;
  scrollbar-color: #aaa transparent;
  -ms-overflow-style: -ms-autohiding-scrollbar;


.minimal-scrollbars::-webkit-scrollbar-track  
  background-color: transparent;


.minimal-scrollbars::-webkit-scrollbar
  width: .3em;


@media(hover:hover)
  .minimal-scrollbars
    scrollbar-color: transparent transparent;
  
  .minimal-scrollbars:hover
    scrollbar-color: #aaa transparent;
  
  .minimal-scrollbars::-webkit-scrollbar-thumb 
    background-color: transparent;
  
  .minimal-scrollbars:hover::-webkit-scrollbar-thumb 
    background-color: #aaa;