web-dev-qa-db-fra.com

Appliquer Border-Radius aux barres de défilement avec CSS

Pour faire simple, voici ce que je veux (obtenu sur un navigateur Webkit en utilisant - webkit-scrollbar ):

Et voici ce que j'obtiens Opera (Firefox n'applique pas non plus le rayon de la bordure à la barre de défilement, mais applique toujours la bordure)):

Existe-t-il un moyen simple de ne pas faire disparaître la bordure sous la barre de défilement?

Je n'ai pas besoin du style sophistiqué de - webkit-scrollbar mais je voudrais que la page soit propre et symétrique ...

htmlscrollbarcss
23
Yves

J'ai eu le même problème. Ce n'est pas la plus élégante des solutions mais, mettez simplement un petit div à l'intérieur de votre boîte extérieure afin que la barre de défilement ne chevauche pas la boîte extérieure.

Comme ce code copié de ce stylo :

.box {
  height: 200px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid #666;
  padding: 6px 0px;
  background: #ccc;
}

.box-content {
  height: 200px;
  width: 250px;
  overflow: auto;
  border-radius: 8px;
}
<div class="box">
  <div class="box-content">
    <ol>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
</div>
27
Mark

Mettez le contenu à faire défiler dans un div avec overflow: auto. Autour de ce contenu div mettez un div avec vos coins arrondis et overflow: hidden.

Vous pouvez maintenant voir la barre de défilement, mais ses coins externes sont masqués et ne perturbent pas les coins arrondis du div externe.

Exemple:

// Insert placeholder text
document.querySelector('.inner').innerHTML = 'Text<br>'.repeat(20);
.outer {
  width: 150pt;
  border: 1px solid red;
  border-radius: 15pt;
  overflow: hidden;
}

.inner {
  height: 200px;
  overflow-y: auto;
}
<div class="outer">
    <div class="inner">
        <!-- lots of text here -->
    </div>
</div>
21
SimpleDesign

mince avec des coins arrondis

@-moz-document url-prefix() {
    .scrollbar {
        overflow: auto;
        width: 0.5em !important;
        scroll-behavior: smooth !important;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
        background-color: darkgrey !important;
        outline: 1px solid slategrey !important;
        border-radius: 10px !important;
    }
}

::-webkit-scrollbar {
    width: 0.5em !important;
    scroll-behavior: smooth !important;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

::-webkit-scrollbar-thumb {
    background-color: darkgrey !important;
    outline: 1px solid slategrey !important;
    border-radius: 10px !important;
}
<div class="scrollbar" style="height: 600px">
   <h1>Scrollbar is slim with rounded corners</h1>
   <br/>
   <br/>
   <br/>
   <br/>
   <h1>Scrollbar is slim with rounded corners</h1>
   <br/>
   <br/>
   <br/>
   <br/>
   <h1>Scrollbar is slim with rounded corners</h1>
</div>
1
WasiF

Ce serait bien si vous pouviez fournir un violon. Néanmoins, vous devriez essayer de changer le dimensionnement de la boîte du conteneur en border-box (si ce n'est pas déjà fait):

box-sizing: border-box;
1
alexej_d

Google a implémenté quelque chose comme ça lors de l'affichage de leurs applications Web.

enter image description here

Avec l'aide de l'élément inspect et du copier-coller, je suis venu avec les codes ci-dessous.

ul::-webkit-scrollbar-thumb {
  background-color: red;
  border: 4px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;  
}

ul::-webkit-scrollbar {
  width: 16px;
}

ul {
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  width: 350px;
  max-height: 300px;
  background-color: #ddd;

  border-radius: 8px;
}

li {
  list-style-type: none;
  padding: 13px;
}
<ul>
  <li>google.com</li>
  <li>facebook.com</li>
  <li>Twitter.com</li>
  <li>instagram.com</li>
  <li>linkedin.com</li>
  <li>reddit.com</li>
  <li>whatsapp.com</li>
  <li>tumblr.com</li>
  <li>skype.com</li>
</ul>

Je ne me considère pas comme un expert CSS, alors j'espère que quelqu'un expliquera comment ces choses fonctionnent.

Ou vous pouvez consulter les documents sur MDN:

0
bertdida