scrolls bar hidden but one show-CodePudding

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

CodePudding user response：

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;
}

CodePudding user response：

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 >aaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccdddddddddddddddddd</div>

<div >aaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccdddddddddddddddddd</div>