如何使滚动条成为内容的顶部

问题描述

我有一个HTML元素，里面有一些下拉框。该元素非常狭窄，因此当所有框都展开时，它们会从底部移开，并在右侧出现滚动条。由于元素非常狭窄，因此内容的空间很大，滚动条将所有内容推向侧面，使其变得更小。

我希望滚动条：

仅当鼠标悬停在身体上方时出现
在内容之上，而不是将其推到一边

这有可能吗？如果可以，怎么办？

解决方法

使div小于conent，并将溢出显示在悬停上。

This answer could give you a better insight.

.Container {
  width: 200px;
  height: 40px;
}

.Container:hover {
  overflow-y: auto;

}

.Content {
  width: 300px;
}

.Flipped,.Flipped .Content {
  transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  /* IE 9 */
  -webkit-transform: rotateX(180deg);
  /* Safari and Chrome */
}

<h1>Show the scroll bar on hover</h1>
<div class="Container Flipped">
    <div class="Content">I'm in Content and I'm very long</div>
</div>

html scrollbar