用jQuery水平滚动区域

Scroll horizontally in area with jQuery

本文关键字：区域 滚动 水平 jQuery      更新时间：2023-09-26

我目前正在做一个项目，我已经介入了一大堆....不开心的东西。

这个想法很简单我有

  1. 一个包含200像素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/

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

可以使用jquery mousewheel插件https://github.com/jquery/jquery-mousewheel

$('.wrapper').mousewheel(function(event, delta) {
      this.scrollLeft -= delta * 200;
      event.preventDefault();
});
https://jsfiddle.net/chukanov/5gdzqhhk/3/

* {
  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/钢笔/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/

相关文章：