logo标签列表

当鼠标悬停在一个 Div 上时，如何使滚动条仅可见？

css
112

我正在尝试找出如何创建一个滚动的 div，只有在鼠标悬停时才显示其滚动条。

谷歌图片搜索是一个例子，在下面的图片中，你可以看到左侧边栏似乎不能滚动，直到你将鼠标悬停在它上面。

这个功能可以用 CSS 实现吗？还是需要 JavaScript？如果可能，能否提供一个快速示例来完成这样的任务？

示例

16个回答
1
这是一个适用于Chrome/Edge/Firefox的版本，没有重新排版的问题。
.overflow-auto {
  overflow: auto;
  // scrollbar firefox
  scrollbar-color: transparent transparent;
  // scrollbar chrome/edge
  &::-webkit-scrollbar-track,
  &::-webkit-scrollbar-thumb {
    visibility: hidden;
  }
  &:hover {
    // scrollbar firefox
    scrollbar-color: initial;
    // scrollbar chrome/edge
    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-thumb {
      visibility: visible;
    }
  }
}

在HTML中，只需添加class="overflow-auto"
<div class="overflow-auto">...</div>
1
这是另一种极简自动隐藏滚动条的版本，没有使用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;
  }
}
0

这个会起作用：

#div{
     max-height:300px;
     overflow:hidden;
}
#div:hover{
     overflow-y:scroll;
}
你能补充细节吗？ - Muhammad
1
细节？？？ 在第一个#div语句中，我设置了div的最大高度，以便它不会超过最大高度，并且当有更多数据时，它将可滚动。我将溢出设置为隐藏。在第二个语句中，我设置了div用于悬停，当任何人悬停div时，它将显示水平滚动条。 - Jamil Moughal
0
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中产生抖动运动，因此这是我找出的更好的代码，以避免这种无用的运动。
这个例子是无法运行的。请参考 https://jsfiddle.net/Abeeee/dg1m7ow2/2/。 - user1432181
0
如果你只关心显示/隐藏，这段代码就可以正常工作：
$("#leftDiv").hover(function(){$(this).css("overflow","scroll");},function(){$(this).css("overflow","hidden");});

然而，如果您使用width=100％，则可能会修改设计中的某些元素，因为当您隐藏滚动条时，它会为您的宽度创建更多的空间。

-1

这将有助于您解决overflow: overlay问题。

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

.div-content,
.div:hover {
  visibility: visible;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接