Question

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

我正在尝试实现onmousedown或悬停的左右箭头按钮（无论哪一个都没关系），左右滚动整个窗口（平滑）。

这个网站几乎完全符合我想要的中心箭头：http://www.clholloway.co.za

任何人都可以帮忙吗？欢呼声。

Answer 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/

Answer 2

我已创建此Fiddle供您使用。看看它是否有助于指向正确的方向。您可能必须根据自己的情况调整它，但希望它能满足您的需求。

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

干杯！

Answer 3

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

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

3 个答案: