isscroll:隐藏指示器时隐藏滚动条

Question

我有一个横向iScroll实例，它有一个交互式滚动条。

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

我希望它的滚动条隐藏时，isscroll使指示器隐藏(display: none)我注意到，它改变了指标的css display属性时，它检测到滚动是不需要的，因为缺乏幻灯片/元素滚动。

这通常发生在我将浏览器从小窗口调整为大窗口时。

fadeScrollbars不完全是我想要的，因为它隐藏了滚动条和指示器，即使它仍然可以滚动。

如果指示器隐藏，如何配置isroll不显示滚动条?

是否有其他解决方法?

Answer 1

这是很久以前当这个问题被添加，但我通过添加一些额外的代码库来解决这个问题-在v5.1.3中，我发现方法刷新在开始是一些'if条件':

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

改变

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

有一个使用jQuery的解决方案(只需检查指示器是否隐藏并隐藏滚动条):

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

Answer 3

你想那样吗?在代码中添加 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,
    });