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

Question

因此，我试图在不改变宽度的情况下显示悬停时的div滚动。到目前为止，与我已经确定了以下问题的代码：它可以追溯到顶端UPDATE

• 如果滚动条被悬停后取出：这是由overflow-y:hidden
• 当您使用覆盖所有固定图像在滚动条的顶部（仍然是一个问题）

有没有更好的方法来做到这一点或解决这些问题的方式在CSS？如果有更简单的解决方案，我可以使用任何JS插件。

例子：

.test{ 
 
    height:300px; 
 
    max-height:100px; 
 
    width:300px; 
 
    max-width:310px; 
 
} 
 

 
.test:hover{ 
 
    overflow-y:overlay; 
 
}

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

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的大小）

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

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