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

我希望這將有助於。