'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



Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lamine