Прокрутите по горизонтали в области с помощью jQuery

Question

В настоящее время я работаю над проектом, и я вступил в большую группу .... что-то недовольство.

Идея проста У меня есть

1. область с предметами с 200px width и display:inline-block собственностью

2. Упаковочных с

   white-space: nowrap; 
   width: 100%; 
   overflow-x: auto; 
   

Теперь мне нужно, чтобы сделать это прокрутка по горизонтали, когда вы прокручиваетесь в области обертки. Я слышал что-то около DOMMouseScroll и колесико мыши в JQuery (я думаю). Но мой мозг не смог достичь нормального решения.

Любая помощь/подсказки?

Решение: https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Просто для прокрутки по горизонтали, это то, что мне нужно ...

Answer 1

Вы можете использовать JQuery плагин колеса прокрутки https://github.com/jquery/jquery-mousewheel

$('.wrapper').mousewheel(function(event, delta) { 
     this.scrollLeft -= delta * 200; 
     event.preventDefault(); 
}); 

https://jsfiddle.net/chukanov/5gdzqhhk/3/

Answer 2

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background: #000; 
    font-family: Georgia; 
    font-size: 34px; 
    font-style: italic; 
    letter-spacing: -1px; 
    width: 12000px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
} 

.section { 
    margin: 0px; 
    bottom: 0px; 
    width: 4000px; 
    float: left; 
    height: 100%; 
    text-shadow: 1px 1px 2px #f0f0f0; 
} 

.section h2 { 
    margin: 50px 0px 30px 50px; 
} 

.section p { 
    margin: 20px 0px 0px 50px; 
    width: 600px; 
} 

.black { 
    color: #fff; 
    background: #000 url(http://i.imgur.com/pZWuILO.jpg) no-repeat top right; 
} 

.white { 
    color: #000; 
    background: #fff url(http://i.imgur.com/LVp6aFC.jpg) no-repeat top right; 
} 

.section ul { 
    list-style: none; 
    margin: 20px 0px 0px 550px; 
} 

.black ul li { 
    float: left; 
    padding: 5px; 
    margin: 5px; 
    color: #aaa; 
} 

.black ul li a { 
    display: block; 
    color: #f0f0f0; 
} 

.black ul li a:hover { 
    text-decoration: none; 
    color: #fff; 
} 

.white ul li { 
    float: left; 
    padding: 5px; 
    margin: 5px; 
    color: #aaa; 
} 

.white ul li a { 
    display: block; 
    color: #222; 
} 

.white ul li a:hover { 
    text-decoration: none; 
    color: #000; 
} 

---

<div class="section black" id="section1"> 
    <h2>Section 1</h2> 
    <p> 
    MY Spectre around me night and day Like a wild beast guards my way; My Emanation far within Weeps incessantly for my sin. 
    </p> 
    <ul class="nav"> 
    <li>1</li> 
    <li><a href="#section2">2</a></li> 
    <li><a href="#section3">3</a></li> 
    </ul> 
</div> 
<div class="section white" id="section2"> 
    <h2>Section 2</h2> 
    <p> 
    ‘A fathomless and boundless deep, There we wander, there we weep; On the hungry craving wind My Spectre follows thee behind. 

    </p> 
    <ul class="nav"> 
    <li><a href="#section1">1</a></li> 
    <li>2</li> 
    <li><a href="#section3">3</a></li> 
    </ul> 
</div> 
<div class="section black" id="section3"> 
    <h2>Section 3</h2> 
    <p> 
    ‘He scents thy footsteps in the snow Wheresoever thou dost go, Thro’ the wintry hail and rain. When wilt thou return again? 

    </p> 
    <ul class="nav"> 
    <li><a href="#section1">1</a></li> 
    <li><a href="#section2">2</a></li> 
    <li>3</li> 
    </ul> 
</div> 

---

$(function() { 
      $('ul.nav a').bind('click', function(event) { 
      var $anchor = $(this); 
      /* 
      if you want to use one of the easing effects: 
      $('html, body').stop().animate({ 
       scrollLeft: $($anchor.attr('href')).offset().left 
      }, 1500,'easeInOutExpo'); 
      */ 
      $('html, body').stop().animate({ 
       scrollLeft: $($anchor.attr('href')).offset().left 
      }, 1000); 
      event.preventDefault(); 
      }); 
     }); 

Пожалуйста, проверьте эту ссылку: - http://codepen.io/SitePoint/pen/WrZmME & https://www.sitepoint.com/10-jquery-horizontal-scroll-demos-plugins/ & http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/