0

I am making a custom horizontal scrollbar. Is it possible to disable right arrow on the left and left arrow on the right? I want to make it with only two buttons. How can I achieve this? Also, the question is how can I change their background independently? For the left button's background left arrow image. For the right button's background right arrow image as well.

Here is what I did:

.men-row {
  width: 540px;
  height: 95px;
  overflow-y: auto;
  overflow-x: auto;
  display: flex;
  text-align: center;
}

.men-row img {
  padding-left: 20px;
  padding-right: 20px;
}

.men-row::-webkit-scrollbar {
  height: 12px;
}

.men-row::-webkit-scrollbar,
.men-row::-webkit-scrollbar-thumb,
.men-row::-webkit-scrollbar-track {
  width: 4px;
  border: none;
}

.men-row::-webkit-scrollbar-track-piece,
.men-row::-webkit-scrollbar-corner,
.men-row::-webkit-resizer {
  display: none;
}

.men-row::-webkit-scrollbar-thumb {
  border-radius: 15px;
  width: 2px;
  background-color: #fff;
  border: 2px solid #b4b4b4;
}

.men-row::-webkit-scrollbar-track {
  background-image: url("img/scrollbg.png");
  background-repeat: no-repeat;
  background-position: center;
}

.men-row::-webkit-scrollbar-button {
  border: 1px solid black;
}
<section class="men-row">
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
  <div class="placholder-man">
    <img src="img/man.png" alt="picture">
    <p>Name</p>
  </div>
</section>

Here is what I want to achieve: enter image description here

Gerard
  • 15,418
  • 5
  • 30
  • 52
Ruslan Anisimov
  • 47
  • 1
  • 9
  • you can apply css to your scrollbars with `::-webkit-scrollbar-button:horizontal:decrement { /* Left */}` and `::-webkit-scrollbar-button:horizontal:increment { /* Right */ } ` – Stender Oct 19 '18 at 07:56
  • Meaning : `section.men-row::-webkit-scrollbar-button:horizontal:decrement { display: none; }` could work for example – Stender Oct 19 '18 at 08:00
  • @Stender yes, it left only 1 button by each side, but they work only to scroll to right – Ruslan Anisimov Oct 19 '18 at 08:06
  • It was an example, on how your could use it :) not an answer - you should modify it to your needs – Stender Oct 19 '18 at 08:07
  • 1
    okay... `section.men-row::-webkit-scrollbar-button:horizontal:increment:start{display:none;}` is the `right arrow ->` on the `left side`.. That is a huge hint - especially if I tell you, that there is another pseudo class called `:end` – Stender Oct 19 '18 at 08:15
  • 1
    @Stender THANKS A LOT! Mate, I can't tell by words how happy I am about your answer, thank you million times. You are the best! – Ruslan Anisimov Oct 19 '18 at 08:37
  • 1
    https://webkit.org/blog/363/styling-scrollbars/ – yunzen Oct 19 '18 at 08:40
  • No problem - Glad to help you figure it out! - hopefully you learned something :) – Stender Oct 19 '18 at 08:40
  • 1
    https://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div – yunzen Oct 19 '18 at 08:40

1 Answers1

0

You can use this..

and add more properties as you want to modify

.men-row::-webkit-scrollbar-button {
  background: #444;
}
Rao
  • 397
  • 1
  • 12