Jquery 使用箭头按钮水平滚动窗口

基本上我有一个水平滚动内容的网站。就像整个页面水平滚动一样，不只是一个div

我试图实现左箭头和右箭头按钮，在mousedown或hover上（哪一个还不重要），可以（平滑地）左右滚动整个窗口

这个网站几乎满足了我的需求，有一些小箭头：

---

有人能帮忙吗？干杯。

如果您将

主体

元素的宽度设置为大于视图端口的宽度（并且不要将溢出设置为隐藏），浏览器将支持自动水平箭头键滚动。这与在此网页上使用垂直箭头滚动相同。

我认为使用一点jQuery，您就可以实现所需的功能。基本思想是处理一些事件（onMouseCenter、mousedown等），然后使用这些事件启动滚动

假设您有一些如下所示的标记：

<div id="parent">
    <div class="contentBlock">1</div>
    <div class="contentBlock">2</div>
    <div class="contentBlock">3</div>
    <div class="contentBlock">4</div>
    <div class="contentBlock">5</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'>Left</span>

<span id="panRight" class="panner" data-scroll-modifier='1'>Right</span>

您可以结合使用样式、setInterval和jQuery.scrollLeft（）来实现所需的效果

(function () {

    var scrollHandle = 0,
        scrollStep = 5,
        parent = $(window);

    //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;
    }

}());

完整的JSFIDLE演示了这种方法：

我创建了它以帮助您。看一看，看看它是否有助于为你指明正确的方向。你可能需要根据自己的情况调整它，但希望它能满足你的需要

请注意，我在

上放置了

溢出：隐藏的
，因此不显示显式滚动条；如果需要，可以改变

干杯
 我知道-但在我看来，自动左/右箭头键滚动太慢，不够平滑。因此，理想情况下，我认为解决这个问题的最简单方法是插入按钮，向左或向右滚动浏览器窗口。如果我能让箭头键在你按下时平滑滚动，然后在你释放时停止，我也会很高兴——但我很挣扎，因为JS不是我最强的语言！没有什么比本机滚动更快、更流畅的了。如果在JS中捕捉到事件，则会持续执行JS运行时，它会告诉浏览器视图滚动，添加一个层并降低其速度。你唯一能做的另一件事是在JS中捕捉按键，然后滚动到比正常情况下滚动得更远的地方，但这会让用户感到不安。谢谢，这绝对是完美的！你解决了一个大问题！只需做一个很小的改动，您就可以将其转换为滚动onmousedown（如果有人感兴趣，我已经将这里的小提琴改为在mousedown上工作而不是悬停：）。@user2634764-没问题。很乐意帮忙：）
(function () {

    var scrollHandle = 0,
        scrollStep = 5,
        parent = $(window);

    //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;
    }

}());