只有在Div悬停时才能看到滚动条？

Question

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

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

这可能是CSS还是需要Javascript？如果可能，可以快速举例说明如何完成这样的任务？

Answer 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>

这样的事情会起作用吗？

Answer 2

更改溢出的答案有很多问题，例如内部块的宽度不一致和重排的触发。

有一种更简单的方法可以获得相同的效果，不会触发重排：使用visibility属性和嵌套块：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此方法的另一个特点是visibility是可动画的，因此我们可以向其添加过渡（请参阅上面笔中的第二个示例）。对于UX来说，添加转换效果会更好：滚动条在移动到另一个元素时不会立即出现，并且当使用鼠标光标对其进行定位时，它将更难以错过滚动条，因为它赢得了“滚动条”。也可以立即隐藏。

Answer 3

我认为像

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

Answer 4

给div一个固定的高度并滚动：隐藏;并在悬停时将滚动更改为自动;

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

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

Answer 5

对于webkit浏览器，其中一个技巧是创建一个不可见的滚动条，然后使其显示在悬停状态。此方法不会影响滚动区域宽度，因为滚动条所需的空间已经存在。

这样的事情：

＆＃13;

＆＃13;

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

＆＃13;

some content here

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

如果你只关心显示/隐藏，这段代码可以正常工作：

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

但是，它可能会修改你设计中的一些元素，以防你使用width = 100％，考虑到当你隐藏滚动条时，它会为你的宽度创造一点空间。

Answer 7

这将起作用：

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

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

Answer 9

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

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

Answer 10

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

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

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

Answer 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 中产生抖动运动，所以这是我想出的更好的代码，以避免这种无用的运动。< /p>