Javascript 带滚动条的自动水平滚动

我从安装插件

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

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

---

你只需要一个简单的css规则

overflow-x:scroll，不需要一些外部插件

显示您的html代码和css样式表，您需要为容器div设置此规则。
我做到了。
如果有人可能有类似的问题，这里是我的解决方案：

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

我希望这会有帮助
 我想自定义这个滚动条，所以我使用了这个插件。这就是它现在的样子：