自动滚动horizo​​naly在滚动条

Question

我安装的插件从http://manos.malihu.gr/jquery-custom-content-scroller/

，我想使水平自动滚动从左至右自定义滚动条来管理位置。这个插件适用于我，但我不能让他从左到右自动滚动。 我已经做了这个代码，但它有点窃听

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

Answer 1

所有你需要的是一个简单的CSS规则overflow-x:scroll;，没有必要对一些外部插件，

告诉我们您的HTML代码，CSS样式表，您需要为容器div设置此规则。

Answer 2

我做到了。 如果有人能有类似的问题，这里是我的解决方案：

(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"); 
    } 
}); 

我希望这将有助于。