.js Прокрутка влево и вправо от страницы

Question

У меня есть следующий сценарий и макет страницы - http://jsfiddle.net/wLkYg/, который позволяет пользователю прокручивать вверх и вниз по моему сайту с помощью аккуратного эффекта качания javaScript.

Однако, поскольку я хотел бы расположить контент (цветные #div коробки из примера jsfiddle выше), чтобы быть рядом друг с другом/сбоку, он теряет эффект прокрутки - http://jsfiddle.net/UjeZH/.

Как бы я смог достичь тех же переходов во втором примере, как и в первом?

Answer 1

У меня есть две версии того, что вам нужно, уже на вашем месте.

Version 1: Divs on top of each other

Version 2: Divs on top and next to each other

Проверьте их и скажите мне, если они удовлетворяют ваши потребности. Обе версии разработаны таким образом, чтобы каждый div имел высоту и ширину вашей страницы.

Первая версия не имеет откидную эффект, но вы можете добавить его:

1. В том числе JQuery

2. Добавление следующей JS (так же, как второй вариант)

   var $ root = $ ('html, body'); $ ('а') нажмите (функция() {

   $root.animate({ 
   
       scrollLeft: $($.attr(this, 'href')).offset().left, 
       scrollTop: $($.attr(this, 'href')).offset().top 
   
   }, 500); 
   
   return false; 
   

   }).

Также, если вы используете приведенный выше код, он исправит вашу проблему, поскольку он позволяет прокручивать по вертикали и по горизонтали. Код, который у вас есть, позволяет прокручивать только по вертикали, поэтому он не работает, когда вы выравниваете свои divs по горизонтали.

Answer 2

document.body.addEventListener('wheel', function (e) { 
    console.log(this.scrollLeft) 
    e.preventDefault() 
    if (e.deltaY > 0) { 
     this.scrollLeft += 10 
    } else { 
     this.scrollLeft -= 10 
    } 
}) 

набор CSS и проверить его

HTML, тело {ширина: 2000px; высота: 200 пикселей; background: orange}

То же самое, что и вы, вы можете получить событие другим элементом.