web-dev-qa-db-fra.com

Rendre la barre de défilement visible dans les navigateurs mobiles

quand j'ai une page Web avec un contenu défilable. Avec la propriété css "overflow: auto" ou "overflow: visible", la barre de défilement est visible sur les navigateurs de bureau, mais lorsque j'ouvre la page sur les navigateurs mobiles, la barre de défilement apparaît uniquement lorsque j'essaie de faire défiler. Existe-t-il un moyen de rendre la barre de défilement toujours visible sur les appareils mobiles? J'ai essayé des bibliothèques JQuery mais aucune d'entre elles n'a fonctionné.

Le code html est trivial, j'ai un div à défilement avec un IFrame à l'intérieur:

<div id="wrapper">
    <iframe id="frameContent" src="mysite" scrollable="yes"></iframe>
</div>

Le css:

#wrapper{
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

#frameContent{
    width: 100%;
    height: 100%;
}
javascriptjquerycssscrollmobile-browser
43
user3098549

Essayez d’ajouter ce qui suit à votre CSS, notez que ceci est webkitspécifique :

violon de démonstration

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}
70
SW4
  /* !important is needed sometimes */
 ::-webkit-scrollbar {
    width: 12px !important;
 }

 /* Track */
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
   background: #41617D !important; 
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 

 }
 ::-webkit-scrollbar-thumb:window-inactive {
   background: #41617D !important; 
 }

Ajouter ce code CSS - Cela changera le style de la barre de défilement dans les appareils mobiles uniquement

9
pradeep raj t

Pour les problèmes avec Safari, IOS navigateurs,

Réglage

-webkit-overflow-scrolling: auto

avec CSS mentionné ci-dessus dans other :: - les solutions webkit-scrollbar ici, fonctionne bien

1
Sasi Kumar M