Блог

У меня есть горизонтальный экземпляр iScroll, который имеет интерактивную полосу прокрутки.

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

Я хочу, чтобы его полосы прокрутки скрывались, когда iScroll делает индикатор скрытым ( display: none )
Я заметил, что это изменяет свойство css display индикатора, когда обнаруживает, что прокрутка не нужна из-за отсутствия слайдов / элементов для прокрутки.

Обычно это происходит, когда я изменяю размер браузера с маленьких на большие видовые экраны.

fadeScrollbars это не совсем то, что я хотел, потому что это скрывает полосу прокрутки и индикатор, даже если прокрутка все еще разрешена.

Как мне настроить iScroll так, чтобы не отображать полосу прокрутки, если индикатор скрыт?

Есть ли какой-либо обходной путь для этого?

Этот вопрос был добавлен давным-давно, но я решил это, добавив некоторый дополнительный код в библиотеку — В версии 5.1.3 я нашел метод refresh, где в начале приведены некоторые «if conditions»:

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

измените на

 if ( this.options.listenX amp;amp; !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 amp;amp; !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';
    }
  

Существует обходной путь с использованием jQuery (просто проверьте, скрыт ли индикатор, и скройте полосу прокрутки):

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

Ты хочешь вот так? Добавьте hideScrollbars: true в свой код

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