Использование Кнопок Со Стрелками Для Горизонтальной Прокрутки Окна

в основном у меня есть веб-сайт с горизонтальной прокруткой контента. Как и вся страница прокручивается горизонтально, а не только div.

Я пытаюсь реализовать кнопки со стрелками влево и вправо, которые onmousedown или hover (не имеет значения, какой из них еще), прокручивает все окно (плавно) влево и вправо.

этот сайт делает очень многое, что я хочу с маленького центру стрелки: http://www.clholloway.co.za

может кто поможет с этим? Овации.

9
horizontal-scrolling jquery navigation

3 ответов

Я думаю, что с немного 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/

14

Я создал этот Скрипка для вас помочь. Взгляните и посмотрите, поможет ли это указать вам в правильном направлении. Вероятно, вам придется адаптировать его к вашей ситуации, но надеюсь, что он сделает то, что вам нужно.

обратите внимание, что я поставил overflow:hidden на <body> поэтому явные полосы прокрутки не отображаются; при желании измените.

Ура!

1

Если вы выберите body элемент шириной больше, чем порт просмотра (и не устанавливайте переполнение скрыто) браузер будет поддерживать горизонтальную прокрутку стрелки автоматически. Это то же самое, что использовать вертикальную стрелку прокрутки на этой веб-странице.

0