使用jQuery在区域中水平滚动[重复]

Posted 2023-03-10

【中文标题】使用jQuery在区域中水平滚动[重复]

【英文标题】：Scroll horizontally in area with jQuery [duplicate]

【发布时间】：2017-02-15 06:01:21

【问题描述】：

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

这个想法很简单 我有

具有 200px width 和 display:inline-block 属性的项目的区域

包装器

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

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

任何帮助/提示？

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

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

【参考方案1】：

可以使用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/

【讨论】：

是的，这就是我用的，谢谢@Anton Chukanov $(".horizo​​ntal-scroll").mousewheel(function(event, delta) this.scrollLeft -= (delta * 30); event.preventDefault(); );

【参考方案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/