Fitting scrollbars on top of content with no additional padding/margin

[iominh]

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:

Nice indeed, however one MAJOR issue for me and something I see a a HUGE flaw is the fact that the scrollbars can NOT sit on top of the content instead an extra gap is created to accommodate the scrollbar and this is why I do not use this.

To which I replied

Hi ZooKeeper, thanks for the comment! There will always need to be some extra space for the scrollbar (which can be optional and appear on overflow only) but it should still fit within your existing design; just adjust the width of the scrollbar container and/or margins/padding.

To which ZooKeeper replied:

Yes I can do that, but there are times when I absolutely do not want to provide extra padding for the scrollbar. Take a look at this scrollbar: https://github.com/jkuri/ngSlimscroll It rests on top of the content instead of creating extra padding or space, I would use it too except that is has a HUGE flaw which is it is not responsive. At least not with angular bootstrap or material design.

So anyway, I'll include my response below

[iominh]

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!