Question

我目前正在开展一个项目，而且我已经介入了一大堆不满意的事情。

这个想法很简单我有

包含200px width和display:inline-block属性

包装

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

现在我需要在滚动包装器区域时使其水平滚动。我在DOMMouseScroll（我猜）中听说过有关JQuery和鼠标滚轮的内容。但是我的大脑无法达到正常的解决方案。

任何帮助/提示？

解决方案：https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

只是水平滚动，这就是我需要的......

Answer 1

您可以使用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();
          });
        });

请检查此链接： - http://codepen.io/SitePoint/pen/WrZmME＆amp; https://www.sitepoint.com/10-jquery-horizontal-scroll-demos-plugins/＆amp; http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

使用jQuery在区域中水平滚动

2 个答案: