懸停並保持位置時滾動條覆蓋

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>