Использование кнопок со стрелками для прокрутки окна по горизонтали

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

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

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

Может кто-нибудь помочь с этим? Приветствия.

источник

2013-08-06 user2634764

Я думаю, что с помощью 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/

источник

2013-08-06 18:58:22 Josh

Спасибо, это абсолютно идеально! Вы решили большую головную боль! И с очень небольшим изменением вы можете преобразовать его в прокрутку onmousedown (если кому-то интересно, я изменил скрипку здесь, чтобы работать onmousedown, а не зависать: http://jsfiddle.net/atAHh/2/). – user2634764

@ user2634764 - проблем нет. Рад помочь :) – Josh

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

источник

2013-08-06 17:56:16

Я знаю - но автоматическая прокрутка клавиши влево/вправо слишком медленная и не достаточно гладкая, на мой взгляд. Поэтому я думаю, что самый простой способ обойти это - это вставить кнопки, которые прокручивают окно браузера влево или вправо. Я также был бы счастлив, если бы мог получить клавиши со стрелками, чтобы сгладить прокрутку, когда вы нажимаете на них, а затем останавливаетесь при отпускании - но я боюсь, потому что JS не самый сильный язык! – user2634764

Ничто не может быть более быстрым или плавным, чем естественная прокрутка. Если вы поймаете события в JS, вы постоянно выполняете среду выполнения JS, которая затем указывает браузеру прокручивать, добавляя слой и замедляя его. Единственное, что вы могли бы сделать, это поймать keydown в JS, а затем прокрутить гораздо дальше, чем обычно, но это будет раздражать пользователя. –

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

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

Cheers!

источник

2013-08-06 19:05:24 emgee

Использование кнопок со стрелками для прокрутки окна по горизонтали

ответ

Смежные вопросы