[Résolu] Scroll vertical mais pas horizontal

Salut

J'ai un petit problème de placement CSS dont je ne trouve pas la solution.

Soit un slider tout simple à défilement horizontal par le scroll, avec un petite flèche à droite pour indiquer qu'il faut aller voir par là :
https://codepen.io/kerlutinoec/pen/RwgQKPO

Je n'arrive pas à trouver comment faire pour que la flèche (<p>) suive le scroll vertical (reste sur le slider) mais qu'elle reste tout le temps à droite de la fenêtre même quand on scrolle horizontalement pour faire défiler le slider.

<div>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="photos">
	<img src="https://i.imgur.com/w9HPeyP.jpeg" alt="" 
			height="512" width="384">
	<img src="https://i.imgur.com/brHBSF7.jpeg" alt="" 
			height="512" width="384">
	<img src="https://i.imgur.com/l5rPYT4.jpeg" alt="" 
			height="512" width="384">
		<img src="https://i.imgur.com/w9HPeyP.jpeg" alt="" 
			height="512" width="384">
	<img src="https://i.imgur.com/brHBSF7.jpeg" alt="" 
			height="512" width="384">
	<img src="https://i.imgur.com/l5rPYT4.jpeg" alt="" 
			height="512" width="384">
 	<img src="https://i.imgur.com/w9HPeyP.jpeg" alt="" 
			height="512" width="384">
	<img src="https://i.imgur.com/brHBSF7.jpeg" alt="" 
			height="512" width="384">
	<p>&#x2794;</p>
</div>
<div>
<br><br><br><br><br><br><br><br><br><br>
</div>

	.photos {
		position: relative;
		width: 100%;
		height: 90%;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		}
	.photos img { 
		height: 90vh; 
		width: auto; 
		z-index: 0; 
		}
	.photos p { 
		position: absolute; 
		right: 10px;
		bottom: 40%;
		z-index: 1;
		font-size: 2.5em;
    color: white;
		text-shadow: 2px 2px 2px #000;
		}

Merci d'avance pour votre aide
Modifié par kerlutinoec (20 Sep 2021 - 11:07)

Salut,

Une solution serait de sortir le <p> des images et le positionner en dehors :

<div class="slider">// wrapper global qui scroll pas
    <div class="photos"> // wrapper des images qui scroll
        // ici toutes les images
    </div>
    <p>&#x2794;</p> // la la fleche positionnée par rapport au .slider
</div>

Y'a peut etre d'autres solutions...

Bonne journée

Mon slider est dans le flux, j'ai besoin qu'il scrolle verticalement.

kerlutinoec a écrit :
Mon slider est dans le flux, j'ai besoin qu'il scrolle verticalement.

oui ca change rien ça.. c'est juste rajouter une wrapper autour