Question

我有一个水平的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配置为不显示滚动条？

有没有解决方法呢？

Answer 1

很久以前这个问题被添加了但是我通过向库添加一些额外的代码解决了这个问题 - 在v5.1.3中我找到了方法刷新，其中一些是'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';
    }

更改为

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

iScroll：隐藏指标时隐藏滚动条

3 个答案: