Les feuilles de style CSS Overflow: Scroll; - Toujours afficher la barre de défilement verticale?

Donc actuellement, j'ai:

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

Cependant, je ne pense pas qu'il sera évident pour certains utilisateurs qu'il y a plus de contenu là. Ils pourraient défiler en bas de la page sans savoir que ma div contient en fait beaucoup plus de contenu. J'utilise la hauteur 510px de sorte qu'il coupe un peu de texte, donc sur certaines pages, il ne ressemble qu'il n'y a plus de contenu, mais cela ne fonctionne pas pour tous.

J'utilise un Mac, et en Chrome et Safari, la barre de défilement verticale affiche uniquement lorsque la souris est au-dessus de la Div et vous activement de défilement. Est-il un moyen de l'avoir toujours de l'affichage?

  • Êtes-vous en cours d'exécution du Lion?
  • Euh, pouvez-vous recréer exacte de ce comportement sur jsfiddle? Le css que vous avez fourni doit forcer une barre de défilement à être présents tout le temps.
  • Ouais, on dirait que vous avez quelques autres CSS bizarreries de passer à cause de cela que, cela doit afficher la barre de défilement toujours. Assurez-vous que la div à l'habillage de celui-ci sont de style correctement.
  • Je suis sous Lion! Peut-être que c'est ça? Je vais ouvrir une machine virtuelle et voir ce que c'est que du côté de windows de choses...
  • Merde, mon mauvais! C'est une fonctionnalité de Lion. Je devrais vraiment lire ce que je vais acheter avant de me l'acheter... Merci les gars!
InformationsquelleAutor Jambo | 2011-09-20
  1. 337

    Viens de tomber sur ce problème moi-même. OSx Lion masque les barres de défilement lorsque vous n'utilisez pas pour le faire paraître plus "lisse", mais dans le même temps, la question que vous avez adressée revient: "parfois, les gens ne peuvent pas voir si un div a une fonction de défilement ou pas.

    La solution: Dans votre css sont -

    @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 en tant que de besoin. Source

    • Faut-il aussi travailler sur l'iPad avec Safari? Je suis sur un iPad 2 sous iOS 6.1.3 et il ne fonctionne pas.
    • Fonctionne très bien. Vous aurez aussi probablement envie de mettre une couleur de fond sur la barre de défilement lui-même. Si le pouce est très faible car le div est vraiment long, il ne sera pas assez d'un signal visuel à l'utilisateur. J'ai récemment fait cela dans une application iPad à l'aide d'un de 0,25 alpha pour la barre de défilement de fond, 1.0 alpha pour le pouce et un 20px largeur. Semble bon.
    • Est-il un moyen de faire s'appliquent uniquement pour une classe spécifique?
    • A travaillé pour moi seulement après que j'ai mis "overflow: auto" sur le récipient (dans mon cas, un <ul>). Merci!
    • oui, cela semble fonctionner dans une classe; essayer .classname ::-webkit-scrollbar
    • J'ai utilisé de la même css mais Il ne fonctionne que dans chrome et d'autres navigateurs, il l'affichage par défaut de la barre de défilement..j'ai pas de son vieux post, mais si quelqu'un sait à ce sujet alors aider moi plz..
    • Mess avec glisser la barre de défilement à défiler, 4/10, ne vous le recommande pas.
    • génial mec, mais comme souligné par d'autres sur Safari ça ne l'est pas pour tous
    • Toute suggestion sur la façon d'ajouter cette page à un div mais pas de provoquer le contenant du contenu de devenir 7px plus étroite? Au lieu de cela, garder la barre de défilement sur le dessus du contenu?
    • Fonctionne sur OSX Safari, mais pas sur Safari iPad ;(
    • Sur OSX 10.11.6: Fonctionne dans Chrome 62 et Safari 10.1.2. Ne fonctionne pas dans Firefox 57.
    • comment puis-je obtenir que cela fonctionne horizontale? barre de montre pour le défilement vertical mais pas de défilement horizontale

    InformationsquelleAutor NoviceCoding
  2. 12

    Remarque sur Safari iPad, NoviceCoding la solution ne fonctionnera pas si vous avez -webkit-overflow-scrolling: touch; quelque part dans votre CSS.
    La solution est de supprimer toutes les occurrences de -webkit-overflow-scrolling: touch; ou de mettre -webkit-overflow-scrolling: auto; avec
    NoviceCoding de la solution.

    • Est-il possible d'avoir les deux dans notre css - webkit-débordement-défilement: appuyez et les barres de défilement?
    InformationsquelleAutor Razan Paul
  3. 0

    Cela fonctionne avec l'iPad sur Safari sur iOS 7.1.x de mes tests, je ne suis pas sûr au sujet d'iOS 6. Toutefois, il ne fonctionne pas sur Firefox. Il est un plugin jQuery qui vise à être la croix-navigateur compatible appelé jScrollPane.

    Aussi, il y a un double post ici sur un Débordement de Pile qui a quelques autres détails.

    • Être conscient que cette question a été posée il y a 2 ans, avant de iOS6 même existé.
    • webkit est safari, chrome seulement. Vous devrez cibler les Firefox moteur spécifique
    InformationsquelleAutor JStarcher
  4. -2

    Cela rendra les barres de défilement s'affichent toujours quand il est contenu à l'intérieur de windows que vous devez faire défiler à l'accès, il s'applique à toutes les fenêtres et toutes les applications sur le Mac:

    Lancement Préférences Système dans le  menu Pomme
    Cliquez sur le “paramètres Généraux” panneau de
    Cherchez " Afficher les barres de défilement, puis sélectionnez la radiobox à côté de “Toujours”
    Fermez les Préférences Système lorsque vous avez terminé

    • Ce n'est répondre à la question, en quelque sorte, mais c'est un correctif côté client plutôt que de le fixer du côté serveur. Donc, c'est quelque chose de la page web, l'utilisateur a à faire, stackoverflow est une programmation de site afin habituellement, les gens viennent ici pour trouver la solution de code plutôt qu'un moyen pour l'utilisateur de modifier les paramètres de son navigateur.
    InformationsquelleAutor Michelle