Bootstrap滚动区域时间线自动滚动至底部功能失效问题

问题现象 #

需要实现时间线自动滚动至底部的功能，基于jQuery编写的代码运行时可以正常打印高度数值，但滚动区域无滚动效果，控制台无报错。当前滚动区域使用Bootstrap的scroll-area-lg类创建。

原有问题代码 #

<div id="autoScrollArea" class="scroll-area-lg" style="height: 70vh;">
  <div class="scrollbar-container" >
  <div>
  <div class="col-md-12 text-center">
  <fieldset class="position-relative form-group">
  <p class="font-weight-bold">Question 1 <span class="text-danger">*</span></p>
  </fieldset>
  </div>
  <div class="col-md-12 text-center">
  <fieldset class="position-relative form-group">
  <p class="font-weight-bold">Question 2 <span class="text-danger">*</span></p>
  </fieldset>
  </div>
  <div class="col-md-12 text-center">
  <fieldset class="position-relative form-group">
  <p class="font-weight-bold">Question 3 <span class="text-danger">*</span></p>
  </fieldset>
  </div>
  <div class="col-md-12 text-center">
  <fieldset class="position-relative form-group">
  <p class="font-weight-bold">Question 4 <span class="text-danger">*</span></p>
  </fieldset>
  </div>
  <button class="btn btn-primary" id="submitButton"  ng-click="submit()" ng-if="showOnSubmit">Submit</button>
  </div>
  </div>
  </div>
</div>

<button class="btn btn-primary" ng-click="scrollBottom()">Scroll Bottom</button>
   
<script>
$scope.scrollBottom=()=>{
var questionScrollSectionHeight = $('#questionScrollSection').height();
//get scroll height
var scrollHeight = $('#questionScrollSection').scrollTop() + questionScrollSectionHeight;
console.log('scrollHeight', scrollHeight); //getting height
          
$('#questionScrollSection').animate({
    scrollTop: scrollHeight
}, 1000);

//focus on submit button
 $('#submitButton').focus();
}
</script>

失效原因 #

• 选择器ID不匹配：HTML中滚动区域外层容器ID为autoScrollArea，JS代码中使用的选择器#questionScrollSection在页面中不存在，jQuery没有选中任何有效元素，执行动画自然没有效果。
• 找错了实际滚动容器：Bootstrap的scroll-area-lg类本身只定义滚动区域尺寸，真正设置了overflow-y: auto、承载滚动行为的是其内部类名为scrollbar-container的子元素，给外层非滚动元素设置scrollTop不会触发滚动。
• 滚动位置计算错误：滚动到底部的目标scrollTop值应为容器总内容高度（DOM原生属性scrollHeight）减去容器自身可视高度，原有逻辑计算的是当前滚动位置+可视高度，不是底部的目标位置。
• 执行时机冲突：滚动动画还没执行就直接触发按钮聚焦，部分浏览器会自动把滚动条跳到聚焦元素位置，打断动画流程。

修复方案 #

替换原有scrollBottom方法的代码即可：

$scope.scrollBottom = () => {
  // 选中实际产生滚动的内部容器
  const $scrollContainer = $('#autoScrollArea .scrollbar-container');
  // 计算滚动到底部的目标位置
  const targetTop = $scrollContainer[0].scrollHeight - $scrollContainer.height();

  $scrollContainer.animate({
    scrollTop: targetTop
  }, 1000, () => {
    // 等滚动动画结束后再聚焦按钮，避免打断滚动
    $('#submitButton').focus();
  });
}

如果你的项目中scroll-area-lg是基于PerfectScrollbar插件实现的（大部分Bootstrap后台模板的滚动条样式都是用这个插件做的），直接操作DOM的scrollTop可能被插件拦截，这种情况可以直接调用插件实例的滚动方法：

const scrollDom = $scrollContainer[0];
const psInstance = PerfectScrollbar.get(scrollDom);
if (psInstance) {
  psInstance.scrollTo(0, scrollDom.scrollHeight, 1000);
}

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