[英]Autoscroll horizonaly with scrollbar
i installed plugin from http://manos.malihu.gr/jquery-custom-content-scroller/ 我从http://manos.malihu.gr/jquery-custom-content-scroller/安装了插件
And i want to make horizontal autoscroll from left to right with custom scrollbar to manage position. 我想用自定义滚动条从左向右进行水平自动滚动来管理位置。 This plugin works for me but i cant make him to autoscroll from left to right. 这个插件对我有用,但是我不能让他从左到右自动滚动。 I already did this code but its kinda bugged 我已经做了这段代码,但是有点bug
var content=$("#content-1"),autoScrollTimer=2000,autoScrollTimerAdjust,autoScroll;
content.mCustomScrollbar({
axis:"x",
scrollButtons:{enable:true},
callbacks:{
whileScrolling:function(){
autoScrollTimerAdjust=autoScrollTimer*this.mcs.leftPct/100;
},
onScroll:function(){
if($(this).data("mCS").trigger==="internal"){AutoScrollOff();}
}
}
});
content.addClass("auto-scrolling-on auto-scrolling-to-right");
AutoScrollOn("right");
$(".auto-scrolling-toggle").click(function(e){
e.preventDefault();
if(content.hasClass("auto-scrolling-on")){
AutoScrollOff();
}else{
if(content.hasClass("auto-scrolling-to-top")){
AutoScrollOn("left",autoScrollTimerAdjust);
}else{
AutoScrollOn("right",autoScrollTimer-autoScrollTimerAdjust);
}
}
});
function AutoScrollOn(to,timer){
if(!timer){timer=autoScrollTimer;}
content.addClass("auto-scrolling-on").mCustomScrollbar("scrollTo",to,{scrollInertia:timer,scrollEasing:"linear"});
autoScroll=setTimeout(function(){
if(content.hasClass("auto-scrolling-to-top")){
AutoScrollOn("right",autoScrollTimer-autoScrollTimerAdjust);
content.removeClass("auto-scrolling-to-left").addClass("auto-scrolling-to-right");
}else{
AutoScrollOn("left",autoScrollTimerAdjust);
content.removeClass("auto-scrolling-to-right").addClass("auto-scrolling-to-left");
}
},timer);
}
function AutoScrollOff(){
clearTimeout(autoScroll);
content.removeClass("auto-scrolling-on").mCustomScrollbar("stop");
}
all You need is a simple css rule overflow-x:scroll;
您所需要的只是一个简单的CSS规则overflow-x:scroll;
, there's no need for some external plugins, ,则无需某些外部插件,
show us your html code and css stylesheet, you need to set this rule for container div. 向我们展示您的html代码和CSS样式表,您需要为容器div设置此规则。
i did it. 我做的。 if somebody could have similar problem here is my solution: 如果有人可能有类似的问题,这是我的解决方案:
(function($){
$(window).on("load",function(){
var content=$("#content-1"),autoScrollTimer=100000,autoScrollTimerAdjust,autoScroll;
content.mCustomScrollbar({
axis:'x',
theme:'rounded-dark',
scrollButtons:{enable:true},
mouseWheel:{enable:false},
callbacks:{
whileScrolling:function(){
autoScrollTimerAdjust=autoScrollTimer*this.mcs.rightPct/100;
},
onScroll:function(){
if($(this).data("mCS").trigger==="internal"){AutoScrollOff();}
}
}
});
content.addClass("auto-scrolling-on auto-scrolling-to-right");
AutoScrollOn("right");
content.mouseenter(function(e){
AutoScrollOff();
e.preventDefault();
content.addClass('auto-scrolling-off')
});
content.mouseleave(function(){
if(content.hasClass("auto-scrolling-off")){
if(content.hasClass("auto-scrolling-to-left")){
content.addClass('auto-scrolling-on').removeClass('auto-scrolling-off');
AutoScrollOn("left")
}else{
content.addClass('auto-scrolling-on').removeClass('auto-scrolling-off');
AutoScrollOn("right");
}
}
});
content.click(function(e){
e.preventDefault();
if(content.hasClass("auto-scrolling-on")){
if(content.hasClass("auto-scrolling-to-left")){
AutoScrollOff();
content.mCustomScrollbar("stop");
AutoScrollOn("left")
}else{
AutoScrollOff();
content.mCustomScrollbar("stop");
AutoScrollOn("right");
}
}
});
function AutoScrollOn(to,timer){
if(!timer){timer=autoScrollTimer;}
content.addClass("auto-scrolling-on").mCustomScrollbar("scrollTo",to,{scrollInertia:timer,scrollEasing:"linear"});
autoScroll=setTimeout(function(){
if(content.hasClass("auto-scrolling-to-left")){
content.mCustomScrollbar("stop");
AutoScrollOn("right");
content.removeClass("auto-scrolling-to-left").addClass("auto-scrolling-to-right");
}else{
content.mCustomScrollbar("stop");
AutoScrollOn("left")
content.removeClass("auto-scrolling-to-right").addClass("auto-scrolling-to-left");
}
},timer);
}
function AutoScrollOff(){
clearTimeout(autoScroll);
content.removeClass("auto-scrolling-on").mCustomScrollbar("stop");
}
});
i hope it will help. 我希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.