CODEWITHSUNDEEP
htmlcss
Agustín Tamayo Quiñones
Agustín Tamayo Quiñones

Reputation: 306

scrolls bar hidden but one show

I am working on a website where scrolling has been completely disabled using this css style.

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

But now I need a specific scroll inside a div (horizontal scroll) to be visible. How could I show only one scroll while hiding all the others.

Thanks in advance

Upvotes: 1

Views: 48

Answers (2)

Lamine
Lamine

Reputation: 11

try instead of hiding all the scrollbars hide same of them

div {
  width: 150px;
  height: 50px;
  border: 1px solid #000;
  
  overflow-x: scroll;
}

.ele-2::-webkit-scrollbar {display: none;}
<div class="ele-1">aaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccdddddddddddddddddd</div>

<div class="ele-2">aaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccdddddddddddddddddd</div>

Upvotes: 0

SA Bappy
SA Bappy

Reputation: 93

Use this

body::-webkit-scrollbar {
    width: 6px;
    border-radius: 4px;
    background: transparent;
    display: block;
}
body::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: 0px;
    background: #000000;
}

Upvotes: 1

Related Questions