[Résolu] Afficher en permanence la barre de défilement sur mobile et t

Bonjour à tous et à toutes,

J'ai un bloc qui a comme propriété CSS :

overflow-y : scroll;

Sur ordi, ça marche nickel, on voit bien, en permanence, la barre de défilement vertical. Du coup, on comprend tout de suite qu'il y a des choses en dessous et qu'il faut scroller pour voir le reste.
En revanche, sur mobile et tablette, on voit cette barre uniquement si on scrolle dedans (et encore, quelques instants). Le problème c'est qu'à l'inverse de l'ordinateur, comme cette barre de défilement n'est pas là en permanence, au premier abord on ne comprend pas qu'il y a des choses en dessous et qu'il faut scroller pour voir le reste.

Ma question est donc : Comment faire pour que cette barre de défilement vertical soit affichée en permanence sur mobile et tablette ?

Merci par avance pour vos réponses

Bonne journée

A ma connaissance rien de sûr à 100%
Moi je mettrais un petit cadre de délimitation et une petite flèche pour indiquer qu'il y a du contenu après voire un fade-out sur le texte en bordure.

Bonjour,

Sur pas mal d'ordinateurs aussi (dont le mien), la barre de défilement n'est pas affichée sauf quand on fait défiler la page ou le bloc (ça dépend en fait aussi des navigateurs). La tendance est clairement à la suppression de l'affichage de la barre de défilement quelque soit le matériel utilisé. Et le mieux est probablement d'arrêter de vouloir s'en occuper.

Si vraiment c'est nécessaire, je conseille comme Kerlutinoec un effet visuel quelconque.

Amicalement,

Moi je laisserais faire le navigateur.

S'il s'agit de faire comprendre à l'utilisateur qu'il y a une suite au contenu, il est bien aussi de faire comprendre qu'il y a une fin, avec un footer, même composé d'une simple ligne. Car s'il fut un temps où les footers étaient géants, certains aujourd'hui jugent bon d'en faire l'économie, ce qui à mon avis est une erreur, car l'absence de footer rend l'expérience UI désagréable.

Bonjour,

comme le dit parsimonhi, sur les mobiles, il faut oublier, l'habitude maintenant ancrée dans les mœurs, c'est qu'il faut descendre sur la page. Aussi, un site bien structuré devrait faire comprendre au visiteur qu'il y a une suite, sans lui prendre la main Sur les desktop, si tu y tiens, une petite flèche blanche, centrée, qui bouge légèrement et qui se fait discrète avec un changement de couleur quand on descend (mix-blend-mode:difference;) Tu la place où tu veux mais de préférence un peu en haut. Ou alors tu peux la faire disparaître progressivement avec un bout de javascript.

<div class="arrow-down">

.arrow-down {
    	position:fixed;
    	margin:26em auto 0 36%;
    	animation:fadein 4.4s forwards ease;
    	animation:skew 1s infinite;
    	animation-direction:alternate;
    	border-right:8px solid transparent;
    	border-left:8px solid transparent;
    	border-top:30px solid white;
    	color:red;
    	mix-blend-mode:difference;}
    
    @keyframes skew {
  0% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
  100% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

Tu devras adapter les marges et les couleurs à ton projet.
ps: Si tu veux que la barre suive le scroll, il faut bien sûr enlever le "fixed".
Modifié par Bongota (17 Dec 2021 - 14:45)

Bonjour,

@Olivier C et @Bongota : a priori, il s'agit d'un block, pas de la page entière.

Amicalement,

parsimonhi a écrit :
@Olivier C et @Bongota : a priori, il s'agit d'un block, pas de la page entière.

Ah pardon. Effectivement, dans ce cas précis, je trouve que laisser la barre a tout son sens.

Merci à tous pour vos messages

Effectivement, comme l'a rappelé Parsimonhi, c'est sur un bloc que je souhaite qu'il y ait une barre de défilement, mais pas de problème Olivier C et Bongota

Sinon, j'ai trouvé une solution un peu bâtarde. (J'espère être clair) Étant donné qu'il s'agit d'une liste d'éléments qui est dans un bloc, sur mobile et tablette j'ai fait en sorte d'arrêter/de mettre le bas de mon bloc de façon à "couper" le dernier élément visible. De cette façon, l'utilisateur comprend que s'il veut lire la suite, il doit faire défiler.
De plus, comme l'a suggéré Kerlutinoec, j'ai mis un petit cadre.

Merci encore pour vos réponses