jQuery custom scroll causes flicker

Question

I'm using this jQuery custom content scroller and it causes the scrollable section to flicker.

• On clicking another random button it continuously flickers
• If I take no action, it flickers on every few seconds interval

The code used:

$('.custom-scrollbar').mCustomScrollbar({
  scrollInertia: 0,
  alwaysShowScrollbar: 1, // adding / removing this causes no difference
  scrollbarPosition: 'outside'
});

Attached a gif to demonstrate the issue: http://gyazo.com/9ea9d558f2630c74a157c70a367d1868

Answer 1

If it helps anyone: As a fix, I just added a 1px padding for the container; no more flickering.

Answer 2

This custom scrollbar flicks when its container has padding. Remove any padding from this container in css. Fox ex.

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden
{
  padding: 0px;
}

Answer 3

I could not find a CSS solution that worked in my specific case but disabling the updateOnContentResize advanced setting did the trick (of course, at the price of disabling the corresponding feature):

$(".content").mCustomScrollbar({
    advanced: {
        updateOnContentResize: false
    }
});