Scroll horizontally in area with jQuery

Question

I'm currently working on a project and I have stepped in a big bunch of .... something unhappy.

The idea is simple I have

1. an area with items with a 200px width and display:inline-block property

2. Wrapper with

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

Now I need to make it scroll horizontal when you're scrolling in wrapper's region. I've heard something about DOMMouseScroll and mousewheel in JQuery (i guess). But my brain wasn't able to reach a normal solution.

Any help / hints?

Solution: https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Just to scroll horizontally, that's what i needed...

Answer 1

You can use jquery mousewheel plugin 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();
          });
        });

Please check this link:-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/