javascript - iScroll:隐藏指示器时隐藏滚动条

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 属性。

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

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

如何配置 iScroll 在指示器隐藏时不显示滚动条？

有什么解决方法吗？

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