使用 jquery 使用 HTML 按钮在全景图像上水平滚动答案

【问题标题】：Horizontal scroll on panoramic image with HTML buttons using jquery使用 jquery 使用 HTML 按钮在全景图像上水平滚动
【发布时间】：2018-05-03 00:33:00
【问题描述】：

寻找在大型全景图像（例如时间轴）上水平滚动的解决方案。

我目前可以使用滚动/双指触摸板进行滚动，但我希望能够使用鼠标单击进行滚动。

我使用 StackOverflow 中的元素绘制了一个 JSFiddle，但我无法让它工作。

HTML：

<div class="outer">
 <div class="buttons">
  <button id="left">LEFT</button>
  <button id="right">RIGHT</button>
 </div>
 <div class="inner">
  <img src="https://via.placeholder.com/550x300">
 </div>
</div>

JS：

$('#right').click(function() {
  event.preventDefault();
  $('#inner').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

 $('#left').click(function() {
  event.preventDefault();
  $('#inner').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

CSS：

.buttons {
  position: fixed;
  left: 0px;
  top: 0px;
}

.outer {
  width: 200px;
  overflow: scroll;
}

.inner {
  width: 550px;
  top: 25px;
  overflow-y: hidden;
  overflow-x: scroll;
}

任何帮助将不胜感激。

https://jsfiddle.net/phkst96c/2/

【问题讨论】：

标签： jquery scroll horizontal-scrolling

【解决方案1】：

1) HTML 中没有#inner，它是一个类.inner。

2) event 将是 undefined，因为您忘记将其传递给函数。

$('#right').click(function(event) {
  event.preventDefault();
  $('.outer').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

3) .inner 不会 overflow 导致它的宽度等于图像的宽度。你想要的是滚动.outer。

$('#right').click(function(event) {
  event.preventDefault();
  $('.outer').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

 $('#left').click(function(event) {
  event.preventDefault();
  $('.outer').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

.buttons {
  position: fixed;
  left: 0px;
  top: 0px;
}

.outer {
  width: 200px;
  overflow: scroll;
}

.inner {
  width: 550px;
  top: 25px;
  overflow-y: hidden;
  overflow-x: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="buttons">
<button id="left">LEFT</button>
<button id="right">RIGHT</button>
</div>
<div class="inner">
  <img src="http://via.placeholder.com/550x300">
</div>
</div>

【讨论】：