Superposition de la barre de défilement lorsque vous passez la souris et maintenez la position

Question

Donc, j'essaie de montrer le défilement div en vol stationnaire sans changer la largeur. Jusqu'à présent, le code que j'ai identifié les problèmes suivants:

• Lorsque la barre de défilement est retirée après vol stationnaire, il remonte vers le haut MISE À JOUR:Ceci est fixé paroverflow-y:hidden
• Lorsque vous utilisez overlay tous les images sont au-dessus de la barre de défilement (toujours un problème)

Existe-t-il une meilleure façon de le faire ou un moyen de résoudre ces problèmes en CSS? Je suis ouvert à tous les plugins JS s'il existe une solution plus simple.

Exemple:

.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

Je sais que ce n'est pas exactement ce que vous êtes après, mais j'ai ajouté juste pour montrer ce que je pense que vous recherchez.

<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

Donc je l'ai eu pour ne pas faire défiler vers le haut, avec hidden. Il semble que auto (en tant que débordement par défaut) le force à revenir en haut.

Utilisez donc hidden lorsqu'il n'est pas plané.

Encore un problème d'images sur la barre de défilement. (Vous avez besoin de récupérer la taille de la barre de défilement et d'ajouter au plus grand img et le mettre à la taille de la 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>