Question

所以我试图在悬停时显示div滚动而不改变宽度。到目前为止，我已经使用代码确定了以下问题：

在悬停后删除滚动条后，它会返回到顶部更新： 这由 overflow-y:hidden修复
当您使用叠加层时，所有图像都位于滚动条的顶部（仍然是个问题）

有没有更好的方法来解决这个问题？如果有更简单的解决方案，我对任何JS插件都是开放的。

示例：

＆＃13;

.test{
  height:300px;
  max-height:100px;
  width:300px;
  max-width:310px;
}

.test:hover{
  overflow-y:overlay;
}

＆＃13;

<div class="test">
<img src="https://unsplash.it/300/300">
<img src="https://unsplash.it/300/300">
<img src="https://unsplash.it/300/300">
<img src="https://unsplash.it/300/300">
<img src="https://unsplash.it/300/300">
</div>

＆＃13;

Answer 1

我知道这并不完全是你所追求的，但我添加它只是为了展示我认为你在寻找什么。

    <div id="outer">
    <div id="top">
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>10th P Tag</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>20th P Tag</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>30th P Tag</p>
    </div>
    <div id="bottom">
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>10th P Tag</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>20th P Tag</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>Content Here</p>
        <p>30th P Tag</p>
    </div>
    </div>
    <script>
        $('#bottom').on('scroll', function () {
            $('#top').scrollTop($(this).scrollTop());
        });
    </script>
    <style>
        div {
    position : absolute;
    top      : 0;

}
#outer {
  width    : 50%;
  height   : 300px;
  overflow : hidden;
}
#top {
    overflow : hidden;
    left     : 0;
    background-color: blue;
    width    : 100%;
    height   : 300px;
}
#bottom {
    width:100%;
    height:100%;  
    opacity: 0.5;
    left       : 0;
    overflow   : auto;
    overflow-x : hidden;
    overflow-y : hidden;
}
#bottom:hover{
     overflow-y:scroll;
}
</style>

Answer 2

所以我没有用hidden滚动到顶部。似乎auto（作为默认溢出）强制它回到顶部。

因此，如果没有悬停，请使用hidden。

滚动条上仍有图像问题。（需要检索滚动条的大小并添加到最大的img并将其设置为div.test的大小）

＆＃13;

.test {
  height: 300px;
  inline-size: max-content;
}

.test img {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right:17px /*asuuming it is the normal size*/
}

.test:hover {
  overflow-y: overlay;
}

.test:not(:hover) {
  overflow-y: hidden;
}

＆＃13;

<div class="test">
  <img src="https://unsplash.it/300/300"><br/>
  <img src="https://unsplash.it/300/300" style="width:350px"><br/>
  <img src="https://unsplash.it/300/300"><br/>
  <img src="https://unsplash.it/300/300"><br/>
  <img src="https://unsplash.it/300/300">
</div>

＆＃13;

悬停和保持位置时滚动条覆盖

2 个答案: