2016-11-27 3 views
2

と私はhttp://manos.malihu.gr/jquery-custom-content-scroller/オートスクロールはhorizo​​nalyスクロールバー

からプラグインをインストールして、私は位置を管理するためのカスタムスクロールバーを左から右に水平方向の自動スクロールを作りたいです。このプラグインは私のために働くが、私は左から右に自動スクロールすることはできません。

はあなたが必要とする、私達にあなたのHTMLコードとCSSスタイルシートを表示し、あなたが必要なのは、単純なCSSルールoverflow-x:scroll;で、いくつかの外部プラグインの必要はありません は、私はすでにこのコードをしましたが、そのちょっと

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

答えて

0

を盗聴しましたコンテナdivのこのルールを設定します。

+0

このスクロールバーをカスタマイズしてこのプラグインを使用したいと考えています。 これは現在の外観です。 http://projekt.mgrzybowski.pl/autoscroll/ –

0

私はそれをしました。

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

私はそれに役立つことを願っています:誰かが同様の問題を抱えていることができれば ここに私のソリューションです。

関連する問題