Comment puis-je ajouter une marge à un CSS webkit barre de défilement?

Voici mon site avec le courant webkit barre de défilement: http://willwhitehead.com

J'aimerais créer un fossé entre la barre de défilement et le bord droit de l'écran.

Comment puis-je y parvenir?

Merci d'avance,

Sera

OriginalL'auteur user3757637 | 2015-04-25

  1. 11

    Il y a encore une autre solution qui pourrait s'adapter facilement dans un projet collectif.
    Si vous utilisez une bordure transparente comme une marge et un box-shadow avec encart pour définir c'est en couleur, vous obtiendrez le résultat que vous espérez pour.

    Par exemple:

    ::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px 10px green;
    border: solid 3px transparent;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px red;
    border: solid 3px transparent;
}

    Cela peut être une vilaine barre de défilement, mais c'est un exemple de ce que je veux dire.

    C'est une excellente idée, merci!
    Super! Je vous remercie.

    OriginalL'auteur Victor Mendizabal Coelho

  2. 1

    Ce n'est pas votre question, mais dans de nombreux cas, il est peut-être plus simple pour ajouter padding-right vos éléments conteneur, et de ne pas la barre de défilement.

    OriginalL'auteur Jose Ospina

  3. 0
    ::-webkit-scrollbar {
  width: 14px;
}

/* 4px scroll thumb. 10px margin from right margin */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 14px 14px transparent;
  border: solid 4px transparent;
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 14px 14px #bbbbbe;
  border: solid 4px transparent;
  border-radius: 14px;
}

::-webkit-scrollbar-button {
  display: none;
}

    codesandbox exemple - https://codesandbox.io/s/5vk9246qyk

    webkit-scrollbar pris en charge par 93.02% du total des navigateurs au moment ou l'écriture https://www.caniuse.com/#search=webkit-scrollbar

    OriginalL'auteur Mihai Serban