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?

I'd have a solution for AngularJS. Interested? – hgoebl Dec 11 '14 at 12:26 — hgoebl, Dec 11 '14 at 12:26

score 0 · Answer 1 · answered Sep 02 '15 at 14:17

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

score 0 · Answer 2 · answered Dec 04 '17 at 19:16

0

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

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

answered Dec 04 '17 at 19:16

Vitor

523
2
4
28

score 0 · Answer 3 · answered Jul 17 '19 at 01:51

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

iScroll: Hide scrollbar when indicator is hidden

3 Answers3