求助：使用jQuery结合HTML按钮实现全景图水平滚动功能

我最近在做大型全景图（比如时间轴这类长内容）的水平滚动功能，目前已经能用滚轮或者双指触摸板实现滚动了，但还想加上鼠标点击左右按钮控制滚动的功能。参考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://...">
  </div>
</div>

后来我重新梳理了逻辑，写出了能正常运行的完整方案，分享给你：

完整可运行代码 #

HTML部分

<div class="outer">
  <div class="buttons">
    <button id="left">LEFT</button>
    <button id="right">RIGHT</button>
  </div>
  <div class="inner">
    <!-- 替换成你的全景图地址即可 -->
    <img src="https://picsum.photos/2000/500" alt="大型全景图">
  </div>
</div>

CSS部分

.outer {
  width: 100%;
  overflow-x: auto;
  position: relative;
}

.buttons {
  position: sticky;
  top: 10px;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  z-index: 10; /* 确保按钮不会被全景图遮挡 */
}

.inner {
  white-space: nowrap; /* 强制内容不换行，保证全景图横向展示 */
}

.inner img {
  display: inline-block;
  height: auto;
  max-height: 400px; /* 可以根据需求调整图片高度 */
}

JavaScript部分

const leftBtn = document.getElementById('left');
const rightBtn = document.getElementById('right');
const outerContainer = document.querySelector('.outer');
const scrollStep = 200; // 每次点击滚动的距离，数值越大滚得越远，可按需调整

// 左按钮点击事件：向左滚动指定距离
leftBtn.addEventListener('click', () => {
  outerContainer.scrollBy({
    left: -scrollStep,
    behavior: 'smooth' // 平滑滚动效果，去掉就变成瞬间跳转
  });
});

// 右按钮点击事件：向右滚动指定距离
rightBtn.addEventListener('click', () => {
  outerContainer.scrollBy({
    left: scrollStep,
    behavior: 'smooth'
  });
});

关键要点说明 #

• 必须给.outer容器设置overflow-x: auto，这样内容超出容器宽度时才会触发水平滚动
• 使用scrollBy()方法替代直接修改scrollLeft，可以更灵活地控制滚动行为，比如加上平滑滚动的效果
• scrollStep参数可以根据你的全景图宽度和需求调整，找到最适合的滚动幅度

内容的提问来源于stack exchange，提问作者osteopathx