实现子元素平滑滚动且不触发文档滚动的技术问询

我来帮你搞定这个问题！你遇到的父窗口同步滚动的核心原因是滚动位置计算错误，之前的代码用了相对于整个文档的偏移量，而不是滚动容器内部的相对位置，咱们一步步修正：

第一步：调整CSS，确保滚动容器的定位上下文 #

先给.listings加个position: relative，这样后续计算元素位置时能以它为基准，不然会默认以整个文档为参照：

.listings {
  width: 300px;
  height: 500px;
  overflow-y: scroll;
  position: relative; /* 新增这行，关键！ */
}

第二步：修改jQuery代码，正确计算滚动位置 #

原来的代码要么针对html, body滚动，要么用了错误的偏移量，现在咱们改成只针对.listings容器，并且用元素相对于容器的位置来计算：

jQ = jQuery.noConflict();
jQ(document).ready(function(){
  // 只绑定element1里的链接，避免影响页面其他链接
  jQ(".element1 a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault(); // 彻底阻止浏览器默认的锚点跳转行为
      var hash = this.hash;
      var $scrollContainer = jQ('.listings');
      // 获取目标元素相对于滚动容器的顶部偏移，减去你要的100px间距
      var targetPosition = jQ(hash).position().top - 100;
      // 仅让滚动容器执行平滑滚动
      $scrollContainer.animate({
        scrollTop: targetPosition
      }, 800);
    }
  });
});

为什么之前的代码没用？ #

• 你之前替换成.listings但用了offset().top，这个值是元素相对于整个页面的顶部距离，远大于容器的可滚动高度，容器滚到顶/底后，浏览器就会触发父窗口滚动。
• 没加position: relative的话，position().top还是会以整个文档为参照，结果和offset().top一样，自然还是错的。

现在再点击链接试试，.listings会平滑滚动到对应内容，父窗口完全不会动啦！

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