只有在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属性和嵌套块:

.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来说,添加转换效果会更好:滚动条在移动到另一个元素时不会立即出现,并且在使用鼠标光标对其进行定位时更难以错过滚动条,因为它不会立即隐藏好.

Answer 3

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

Answer 4

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

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

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

Answer 5

.scroll {
  height: 140px;
  width: 140px;
  overflow-y: auto;
}

.scroll:active::-webkit-scrollbar-thumb,
.scroll:focus::-webkit-scrollbar-thumb,
.scroll:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}
.scroll::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    visibility: hidden;
}

.scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

<div class="scroll">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis aliquid recusandae nisi dolore numquam consectetur voluptatibus officia. Velit quod corporis quae quos. Facere, obcaecati? Tenetur obcaecati minima fugit a iste!
  </p>
</div>