Hiding horizontal scrolling bar doesn´t work using simplebar library

user_11639418 0
Viewed 4739

I'm using simplebar library (https://github.com/Grsmto/simplebar) inside of an angular 6 project, when I added the simple bar in my html tag, it showed up an horizontal and a vertical scroll bar, so I want to show the vertical scroll bar only.

I've tried to hide the horizontal scroll bar with this CSS property: 

overflow-x: hidden

and with this properties too: 

width:100%" and "position:abolute" or "position:relative"

<div data-simplebar style="overflow-x: hidden">
    <div *ngFor="let example of examples;">
        <div>{{example.title}}</div>
            <p>{{example.text}}</p>
        </div>
    </div>

I expect only to show the horizontal scroll bar, but it doesn't seem to work, I don't know if I'm missing something or some CSS property, or if Angular is causing this problem.

angular6 angular typescript css html
4 Answers

The SimpleBar library creates wrapper around your contents, hence the CSS overflow applied on your div will not hide the scrollbars.

Hide the horizontal scroll bar created by the plugin

.simplebar-track.simplebar-horizontal {
   display: none;
}

and disable the scroll on scrollable div created by the library.

.simplebar-content {
  overflow-x: hidden;
}
user_42869910

try using both of these commands at once.

  • overflow-y: scroll;
  • overflow-x: hidden;
user_104489660

Old question, but I think there are still no good answer to it. When I am in need of hiding the horizontal scrollbar that's what I do:

.simplebar-scrollbar::before {
  background-color: transparent;
}
user_113617390

If you are using SimpleBar from simplebar-react, you can set the overflow in the style, as in the example below.

<SimpleBar style={{overflowX: 'hidden' }} autoHide={true}>
   ...
</SimpleBar>
user_63073060
Related