如何在水平div中平滑滚动到多个指定元素？

我来帮你搞定这个水平滚动的问题！你现在有个id为scroll-post-1的水平滚动div，想点击后滚动到不同ID的元素，先看看你尝试的两个函数的问题，再给你靠谱的修正方案：

先分析你的尝试 #

• 第一个scroll1()函数失效的原因：jQuery核心库本身没有scrollTo()方法哦，这个方法一般是第三方插件（比如jQuery ScrollTo）提供的，如果你没引入对应的插件，这个函数肯定跑不起来。
• 第二个scroll2()的思路是对的，但有几个细节要修正：
  1. HTML里元素ID不能以数字开头（比如#2、#3），这不符合规范，浏览器可能会解析出问题，建议改成#target-2、#target-3这种命名；
  2. 你写的event.preventDefault()没传event参数，直接用会报错；
  3. 用$('#3').offset().left拿到的是元素相对于整个文档的左距离，不是相对于滚动容器的，直接用来设置scrollLeft会导致滚动位置不准，尤其是容器本身有定位或外边距的时候。

修正后的可行方案 #

方案1：基于jQuery的平滑滚动（推荐） #

先调整你的HTML元素ID，再用相对位置计算滚动值：

<!-- 示例结构 -->
<div id="scroll-post-1" style="width: 500px; overflow-x: auto; white-space: nowrap;">
  <div style="display: inline-block; width: 300px; padding: 20px;">区块1</div>
  <div id="target-2" style="display: inline-block; width: 300px; padding: 20px;">区块2</div>
  <div id="target-3" style="display: inline-block; width: 300px; padding: 20px;">区块3</div>
</div>
<button onclick="scrollToTarget('target-2')">滚动到区块2</button>
<button onclick="scrollToTarget('target-3')">滚动到区块3</button>

function scrollToTarget(targetId) {
  const $container = $('#scroll-post-1');
  const $target = $('#' + targetId);
  // 计算目标元素相对于滚动容器的左偏移量，这才是正确的滚动位置
  const scrollPos = $target.position().left;
  
  $container.stop().animate({
    scrollLeft: scrollPos
  }, 500); // 500是滚动时长，单位毫秒
}

方案2：原生JS实现（无需jQuery） #

如果不想依赖jQuery，用原生JS的scrollIntoView更简洁，还自带平滑滚动：

function scrollToTarget(targetId) {
  const container = document.getElementById('scroll-post-1');
  const target = document.getElementById(targetId);
  
  target.scrollIntoView({
    behavior: 'smooth', // 平滑滚动
    block: 'nearest',   // 垂直方向保持当前位置不变
    inline: 'start'     // 水平方向让目标元素对齐容器左侧
  });
}

额外提醒 #

• 一定要给滚动容器设置overflow-x: auto或者overflow-x: scroll，不然水平滚动根本不会生效；
• 记得改掉以数字开头的元素ID，避免不必要的浏览器兼容问题；
• 如果用jQuery方案，要确保页面已经引入了jQuery库哦。

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