Question 241887 in Html Question posted in
Some basic documentation can be found here.

Html – How can i change the width of the scrollbar track

im trying to change the width of the scrollbar track, follwing a design, but i cant figure how the scrollbar is the thing bellow the carousel, ty.

css

.carousel::-webkit-scrollbar {
  height: 4px;
  width: 4px;
  background: gray;
}

.carousel::-webkit-scrollbar-track {
  background: #f1f1f1;
  width: 100px;
}

.carousel::-webkit-scrollbar-thumb {
  background: #888;
}

.carousel::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.carousel::-webkit-scrollbar-thumb:horizontal {
  background: #000;
  border-radius: 10px;
}

design

enter image description here

Tags:

2

Answers


  1. 0

    You can tweak around with the margin; for example, like so:

    .carousel::-webkit-scrollbar-track:horizontal {
    margin: 140px; 
  }

    Also, for responsiveness we have to lower them at each media screen width. For example, like so:

    @media (max-width: 1024px){
  .carousel::-webkit-scrollbar-track:horizontal {
        margin: 200px; 
      }
}
@media (max-width: 768px){
  .carousel::-webkit-scrollbar-track:horizontal {
        margin: 150px; 
      }
}
@media (max-width: 360px){
  .carousel::-webkit-scrollbar-track:horizontal {
        margin: 100px; 
      }
}
    Login or Signup to reply.
  2. 0

    You can add left/right margins to the horizontal track.

    .carousel::-webkit-scrollbar-track:horizontal {
    margin-inline:100px;
}

    EG:

    .carousel {
  display:flex;
  overflow:auto;
  column-gap:10px;
  width:320px;
  padding-bottom:10px;
  scroll-snap-type: x mandatory;
}

.carousel div {
  scroll-snap-align: start;
  min-width:100px; aspect-ratio:1;
  background:#ccc;
  border-radius:20%;
  display: grid;
  place-items: center;
}

/* ⬆ for demo / for you ⬇ */

.carousel::-webkit-scrollbar {
  height: 4px;
}

.carousel::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.carousel::-webkit-scrollbar-thumb:horizontal {
  background: purple;
  border-radius: 2px;
}

.carousel::-webkit-scrollbar-track:horizontal {
  margin-inline:100px;
}
    <div class="carousel">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search