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

【问题标题】：Using Arrow Buttons To Scroll Window Horizontally使用箭头按钮水平滚动窗口
【发布时间】：2013-08-07 20:49:17
【问题描述】：

基本上我有一个水平滚动内容的网站。因为在整个页面水平滚动，而不仅仅是一个 div。

我正在尝试实现 onmousedown 或 hover 左右箭头按钮（哪个还没有太大关系），左右滚动整个窗口（平滑）。

这个网站做了我想要的小中心箭头：http://www.clholloway.co.za

有人可以帮忙吗？干杯。

【问题讨论】：

标签： jquery navigation horizontal-scrolling

【解决方案1】：

我认为使用一点 jQuery 就可以实现您想要的。基本思想是处理一些事件（onmouseenter、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>

还有一些样式可以确保它会导致窗口滚动：

#parent {
    width:6000px;
}
.contentBlock {
    font-size:10em;
    text-align:center;
    line-height:400px;
    height:400px;
    width:500px;
    margin:10px;
    border:1px solid black;
    float:left;
}
.panner {
    border:1px solid black;
    display:block;
    position:fixed;
    width:50px;
    height:50px;
    top:45%;
}
.active{
    color:red;
}
#panLeft {
    left:0px;
}
#panRight {
    right:0px;
}

您可以结合使用样式、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;
    }

}());

完整的 jsFiddle 演示了这种方法：http://jsfiddle.net/jwcarroll/atAHh/

【讨论】：

谢谢，这绝对是完美的！你已经解决了一个大头痛！只需进行很小的更改，您就可以将其转换为滚动 onmousedown（如果有人感兴趣，我已将这里的小提琴更改为 onmousedown 而不是悬停：jsfiddle.net/atAHh/2）。
@user2634764 - 没问题。很高兴帮助:)

【解决方案2】：

我创建了这个Fiddle 来帮助您。看看它是否有助于为您指明正确的方向。您可能需要根据自己的情况对其进行调整，但希望它能满足您的需要。

请注意，我将overflow:hidden 放在<body> 上，因此不会显示显式滚动条；如果需要，可以更改。

干杯！

【讨论】：

【解决方案3】：

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

【讨论】：

我知道 - 但在我看来，自动左/右箭头键滚动太慢且不够流畅。所以理想情况下，我认为解决这个问题的最简单方法是放置向左或向右滚动浏览器窗口的按钮。如果我可以让箭头键在您按下它们时平滑滚动，然后在您释放时停止滚动，我也会很高兴 - 但我正在努力，因为 JS 不是我最擅长的语言！
没有什么比原生滚动更快或更流畅了。如果您在 JS 中捕获事件，您将持续执行 JS 运行时，它会告诉浏览器视图滚动、添加图层并减慢它的速度。您唯一能做的另一件事是在 JS 中捕获 keydown，然后滚动得比平时更远，但这对用户来说是不和谐的。