Hiding horizontal scrolling bar doesn´t work using simplebar library

Issue

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.

Solution

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

Answered By - Ismail Vittal