[英]iScroll: Hide scrollbar when indicator is hidden
I have a horizontal iScroll instance that has an interactive scrollbar. 我有一个水平的iScroll实例,它有一个交互式滚动条。
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. 当iScroll使指示器隐藏时,我希望它的滚动条隐藏( display: none
)我发现当它检测到由于缺少要滚动的幻灯片/元素而不需要滚动时,它会更改指示符的css display
属性。
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. fadeScrollbars
并不是我想要的,因为它隐藏了滚动条和指示器,即使它仍然可以滚动。
How do I configure iScroll to not display the scrollbar if the indicator is hidden? 如果隐藏指示器,如何将iScroll配置为不显示滚动条?
Is there any work-around for this? 这有什么解决方法吗?
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': 很久以前这个问题被添加了但是我通过向库添加一些额外的代码解决了这个问题 - 在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';
}
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';
}
There is a work-around using jQuery (just check if indicator is hidden and hide scrollbar): 有一个使用jQuery的解决方法(只需检查指示器是否隐藏并隐藏滚动条):
if($('#wrapper .iScrollIndicator').is(':hidden')) {
$('#wrapper .iScrollVerticalScrollbar').hide();
}
Do you want like that? 你想要那样吗? Add hideScrollbars: true
in your code 在代码中添加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,
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.