iScroll: Hide scrollbar when indicator is hidden

Question

I have a horizontal iScroll instance that has an interactive scrollbar.

    myScroll = new IScroll('#wrapper', { 
        scrollX: true, 
        scrollY: false, 
        mouseWheel: false,
        scrollbars: 'custom',
        interactiveScrollbars: true,
        resizeScrollbars: false,
        bindToWrapper: false,
        click: true,
        fadeScrollbars: true,
    });

I want its scrollbars to hide when iScroll makes the indicator hidden ( display: none ) I noticed that it changes the indicator's css display property when it detects that scrolling is not needed because of the lack of slides/elements to scroll with.

This usually happens when I resize the browser from small to large viewports.

fadeScrollbars is not exactly what I wanted because it hides the scrollbar and indicator even if it is still okay to scroll.

How do I configure iScroll to not display the scrollbar if the indicator is hidden?

Is there any work-around for this?

Answer 1

It is long time ago when this question was added but I solved that by adding some additional code to library - In v5.1.3 I found method refresh where at the beginning are some 'if conditions':

if ( this.options.listenX && !this.options.listenY ) {
        this.indicatorStyle.display = this.scroller.hasHorizontalScroll ? 'block' : 'none';
    } else if ( this.options.listenY && !this.options.listenX ) {
        this.indicatorStyle.display = this.scroller.hasVerticalScroll ? 'block' : 'none';
    } else {
        this.indicatorStyle.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? 'block' : 'none';
    }

change to

if ( this.options.listenX && !this.options.listenY ) {
        this.indicatorStyle.display = this.scroller.hasHorizontalScroll ? 'block' : 'none';
        this.wrapper.style.display = this.scroller.hasHorizontalScroll ? 'block' : 'none';
    } else if ( this.options.listenY && !this.options.listenX ) {
        this.indicatorStyle.display = this.scroller.hasVerticalScroll ? 'block' : 'none';
        this.wrapper.style.display = this.scroller.hasVerticalScroll ? 'block' : 'none';
    } else {
        this.indicatorStyle.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? 'block' : 'none';
        this.wrapper.style.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? 'block' : 'none';
    }

Answer 2

There is a work-around using jQuery (just check if indicator is hidden and hide scrollbar):

if($('#wrapper .iScrollIndicator').is(':hidden')) {
    $('#wrapper .iScrollVerticalScrollbar').hide();
}

Answer 3

Do you want like that? Add hideScrollbars: true in your code

myScroll = new IScroll('#wrapper', {  
        hideScrollbars: true,
        listenX: true,
        scrollX: true, 
        scrollY: false, 
        mouseWheel: false,
        scrollbars: 'custom',
        interactiveScrollbars: true,
        resizeScrollbars: false,
        bindToWrapper: false,
        click: true,
        fadeScrollbars: true,
    });