Javascript 仅在必要时水平滚动

我有一个水平滚动页面，箭头指示滚动。我正在使用下面的代码，它工作得很好

HTML:

Javascript:

(function () {

    var scrollHandle = 0,
        scrollStep = 5,
        parent = $("#container");

    //Start the scrolling process
    $(".panner").on("mouseenter", function () {
        var data = $(this).data('scrollModifier'),
            direction = parseInt(data, 10);

        $(this).addClass('active');

        startScrolling(direction, scrollStep);
    });

    //Kill the scrolling
    $(".panner").on("mouseleave", function () {
        stopScrolling();
        $(this).removeClass('active');
    });

    //Actual handling of the scrolling
    function startScrolling(modifier, step) {
        if (scrollHandle === 0) {
            scrollHandle = setInterval(function () {
                var newOffset = parent.scrollLeft() + (scrollStep * modifier);

                parent.scrollLeft(newOffset);
            }, 10);
        }
    }

    function stopScrolling() {
        clearInterval(scrollHandle);
        scrollHandle = 0;
    }

}());

您也可以在此查看WordPress安装中的代码：

---

箭头和卷轴工作得很好，但我有不同的网站，有不同数量的文本和图像。所以有些页面需要水平滚动，有些则不需要。如何添加某种if条件以仅在出现水平溢出时显示箭头？

您的JavaScript代码应如下所示：

(function () {

        var scrollHandle = 0,
            scrollStep = 5,
            parent = $("#container");
        if(checkOverflow()){
            $(".panner").show();
        }
        else
            $(".panner").hide();
        //Start the scrolling process
        $(".panner").on("mouseenter", function () {
            var data = $(this).data('scrollModifier'),
                direction = parseInt(data, 10);

            $(this).addClass('active');

            startScrolling(direction, scrollStep);
        });

        //Kill the scrolling
        $(".panner").on("mouseleave", function () {
            stopScrolling();
            $(this).removeClass('active');
        });

        //Actual handling of the scrolling
        function startScrolling(modifier, step) {
            if (scrollHandle === 0) {
                scrollHandle = setInterval(function () {
                    var newOffset = parent.scrollLeft() + (scrollStep * modifier);

                    parent.scrollLeft(newOffset);
                }, 10);
            }
        }

        function stopScrolling() {
            clearInterval(scrollHandle);
            scrollHandle = 0;
        }
         function checkOverflow()
        {
            var el=document.getElementById('container');
           var curOverflow = el.style.overflowX;
           if ( !curOverflow || curOverflow === "visible" )
              el.style.overflowX = "hidden";

           var isOverflowing = el.clientWidth < el.scrollWidth; 
            el.style.overflowX = curOverflow;

           return isOverflowing;
        }

    }());

---

试图将其添加到css中的容器中，但没有帮助。或者你的意思是什么？林克没有为此工作。对不起，我不太喜欢JS-only HTML/CSS。我把它放在现有JS代码的上面和下面，但没有成功…所以你需要完全实现，然后请接受答案…它也将帮助其他人

(function () {

    var scrollHandle = 0,
        scrollStep = 5,
        parent = $("#container");

    //Start the scrolling process
    $(".panner").on("mouseenter", function () {
        var data = $(this).data('scrollModifier'),
            direction = parseInt(data, 10);

        $(this).addClass('active');

        startScrolling(direction, scrollStep);
    });

    //Kill the scrolling
    $(".panner").on("mouseleave", function () {
        stopScrolling();
        $(this).removeClass('active');
    });

    //Actual handling of the scrolling
    function startScrolling(modifier, step) {
        if (scrollHandle === 0) {
            scrollHandle = setInterval(function () {
                var newOffset = parent.scrollLeft() + (scrollStep * modifier);

                parent.scrollLeft(newOffset);
            }, 10);
        }
    }

    function stopScrolling() {
        clearInterval(scrollHandle);
        scrollHandle = 0;
    }

}());

(function () {

        var scrollHandle = 0,
            scrollStep = 5,
            parent = $("#container");
        if(checkOverflow()){
            $(".panner").show();
        }
        else
            $(".panner").hide();
        //Start the scrolling process
        $(".panner").on("mouseenter", function () {
            var data = $(this).data('scrollModifier'),
                direction = parseInt(data, 10);

            $(this).addClass('active');

            startScrolling(direction, scrollStep);
        });

        //Kill the scrolling
        $(".panner").on("mouseleave", function () {
            stopScrolling();
            $(this).removeClass('active');
        });

        //Actual handling of the scrolling
        function startScrolling(modifier, step) {
            if (scrollHandle === 0) {
                scrollHandle = setInterval(function () {
                    var newOffset = parent.scrollLeft() + (scrollStep * modifier);

                    parent.scrollLeft(newOffset);
                }, 10);
            }
        }

        function stopScrolling() {
            clearInterval(scrollHandle);
            scrollHandle = 0;
        }
         function checkOverflow()
        {
            var el=document.getElementById('container');
           var curOverflow = el.style.overflowX;
           if ( !curOverflow || curOverflow === "visible" )
              el.style.overflowX = "hidden";

           var isOverflowing = el.clientWidth < el.scrollWidth; 
            el.style.overflowX = curOverflow;

           return isOverflowing;
        }

    }());