Open iominh opened 8 years ago
If you look at the basic demo http://iominh.github.io/ng-scrollbars/demo1.html, you'll notice that the scrollbar container has 200px width and 100px height (as specified in the html):
Further examining the DOM structure, we see that 170px width is allocated for the scrollbar content with 30px for the scrollbars:
If we want to allocate all available width for the content with the scrollbar overlaying the content (similar to ngSlimscroll + jQuery slimScroll), then we can apply some CSS adjustments to the margins and padding:
See the following demo with all available width (200px) allocated to the content, with the scrollbars on top of the content (http://recordit.co/KNpzVb4b0I):
To do this, two CSS classes had to be modified slightly (2 changes below):
.mCSB_container_wrapper {
position: absolute;
height: auto;
width: auto;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: 30px; /* set this to 0px */
margin-bottom: 30px;
.mCSB_container_wrapper>.mCSB_container {
padding-right: 30px; /* set this to 0px */
padding-bottom: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
There might be a configuration setting on malihu that can be passed through in the Angular configuration but with a quick glance I didn't see anything: http://manos.malihu.gr/jquery-custom-content-scroller/#configuration-section
Hopefully this helps!
I received a question on my website so I'll like to move the conversation here as I can upload images and examples.
The question asked by "ZooKeeper" was:
To which I replied
To which ZooKeeper replied:
So anyway, I'll include my response below