web-dev-qa-db-fra.com

CSS - Débordement: Défilement; - Toujours afficher la barre de défilement verticale?

Donc actuellement j'ai:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

Cependant, je ne crois pas que certains utilisateurs comprendront plus de contenu. Ils pourraient faire défiler la page sans savoir que ma div contient beaucoup plus de contenu. J'utilise la hauteur 510px pour couper du texte. Ainsi, sur certaines pages, il semble qu'il y ait plus de contenu, mais cela ne fonctionne pas pour toutes.

J'utilise un Mac et, dans Chrome et Safari, la barre de défilement verticale ne s'affiche que lorsque la souris survole la Div et que vous faites défiler activement. Y a-t-il un moyen de toujours l'afficher?

cssmacosscrolloverflow
201
Jambo

J'ai juste rencontré ce problème moi-même. OSx Lion masque les barres de défilement lorsqu'il n'est pas utilisé pour le rendre plus "lisse", mais en même temps le problème que vous avez abordé se pose: les gens ne peuvent parfois pas voir si une div a une fonctionnalité de défilement ou non.

Le correctif: Dans votre css comprennent -

@media(device-width: 768px) and (device-height: 1024px){
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }
}

personnaliser l'apparence au besoin. Source

343
NoviceCoding

Veuillez noter que sur iPad Safari, la solution de NoviceCoding ne fonctionnera pas si vous avez -webkit-overflow-scrolling: touch; quelque part dans votre CSS. La solution consiste à supprimer toutes les occurrences de -webkit-overflow-scrolling: touch; ou à ajouter -webkit-overflow-scrolling: auto; avec la solution de NoviceCoding.

12
Razan Paul

Cela fonctionnera avec iPad sur Safari sur iOS 7.1.x à partir de mes tests, mais je ne suis pas sûr pour iOS 6. Cependant, cela ne fonctionnera pas sur Firefox. Il existe un plugin jQuery qui vise à être compatible avec plusieurs navigateurs et appelé jScrollPane .

En outre, il y a un poste en double ici sur Stack Overflow qui contient d'autres détails.

1
JStarcher