Hortizantally прокрутить div с помощью колеса мыши-javascript

Как раз сейчас, случайно, я наткнулся на http://www.quoplus.com/. Здесь, на некоторых участках сайта, он выполняет вертикальную прокрутку, а в некоторых частях он выполняет горизонтальную прокрутку на прокрутке колеса мыши. Мне очень понравился дизайн, и я планирую научиться этому. Я очень новичок в HTML и CSS и JAVASCRIPT.Hortizantally прокрутить div с помощью колеса мыши-javascript

Это основной дизайн сайта.

До сих пор я в состоянии прокрутки по горизонтали от d2 до d5, когда колесо мыши прокручивается downwards.Scroll от d2 до d1, когда колесо мыши прокручивается вверх. Теперь я хочу узнать, как вернуться к d2, если пользователь прокручивает вверх по d5. Также перейдите к d3, если пользователь прокручивает вниз по d5.

Вот мой код до сих пор:

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<link href="css1.css" rel="stylesheet" type="text/css"> 
</head> 
    <body> 
     <div id="D1"> 
      d1 
     </div> 
     <div id="gentags"> 
      <div id="D2"> 
      d2 
      </div> 
      <div id="D5"> 
      d5 
      </div> 
     </div> 
     <div id="D3"> 
      d3 
     </div> 
    </body> 
</html>

CSS

html,body{ 
    height:100%; 
    width:100%; 
} 

div 
{ 
    height:100vh; 
    width:100vw; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center center; 
    background-size: cover; 
} 

#D1 
{ 
    background-image: url(../Desktop/Unknown-1.png); 
} 

#D2 
{ 
    background-image: url(../Desktop/Unknown-2.png); 
} 

#D3 
{ 
    background-image: url(../Desktop/Unknown-4.png); 
} 

#D5 
{ 
    background-image:url(../Desktop/Unknown-3.png); 
} 

#gentags 
{ 
    width:200%; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center center; 
    background-size: cover; 
    overflow: hidden; 
} 

#gentags div 
{ 
    width: 50%; 
    float:left; 
    white-space:nowrap; 
    }

<script> 
function scrollHorizontally(e) { 
     e = window.event || e; 
     var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
     if(delta<0) 
     {document.getElementById('D2').scrollLeft -= (delta*50); // Multiplied by 40 
      document.body.scrollLeft -= (delta*50); // Multiplied by 40 
      e.preventDefault();} 
     else 
     { 

     } 
} 
if (document.getElementById('D2').addEventListener) { 
    // IE9, Chrome, Safari, Opera 
    document.getElementById('D2').addEventListener("mousewheel", scrollHorizontally, false); 
    // Firefox 
    document.getElementById('D2').addEventListener("DOMMouseScroll", scrollHorizontally, false); 
} 
// IE 6/7/8 
else 
{document.getElementById('D2').attachEvent("onmousewheel", scrollHorizontally); 
}

Является ли подход, который я использую правильно? Если нет, пожалуйста, направляйте меня к правильному подходу.

источник

2015-10-05 Babaji Shivram

уже задавался. вот ссылка [1]: http://stackoverflow.com/questions/2346958/how-to-do-a- horizontal-scroll-on-mouse-wheel-scroll –

Я знаю. Оттуда я только научился этому делать. Но этот вопрос не решает мою проблему. Пожалуйста, внимательно прочитайте вопрос перед ответом. –

Я даю вам ссылку только для повторения. вы можете научиться этому и решить свою проблему самим собой. –

Я использовал HorzScrolling плагин для аналогичного проекта. Вам просто нужно настроить необходимый плагин

Из примера на CSS Tricks

Процесс:

Load Jquery и плагин колесо мыши от here

<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

Присоединить колесика мыши событие к телу. «30» представляет скорость. preventDefault гарантирует, что страница не будет прокручиваться вниз.
```
$(function() { 
     $("body").mousewheel(function(event, delta) { 
      this.scrollLeft -= (delta * 30); 
      event.preventDefault(); 
     }); 
    }); 
```

источник

2015-11-12 12:39:23 William

Hortizantally прокрутить div с помощью колеса мыши-javascript

ответ

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