如何阻止AngularJS弹窗触发背景页面滚动？

这个问题我之前也碰到过，大概率是你用的<a href="#">触发了默认的锚点跳转行为——哪怕你加了ng-click，浏览器还是会尝试跳转到页面顶部（因为#指向锚点为空的位置），这就是表格突然滚回去的元凶。下面给你几个靠谱的解决办法，按优先级来：

1. 阻止链接的默认跳转行为（最直接） #

你之前用了stopPropagation()，但这只是阻止事件冒泡，真正要阻止的是浏览器的默认锚点跳转，得用preventDefault()。

修改你的HTML链接部分，在ng-click里传入$event并调用它的preventDefault()方法：

<a href="#" ng-click="openErrorCounts(name, '5'); $event.preventDefault()">
  <span data-toggle="tooltip" title="{{totalCount(name, 5)}} records; yellow: {{yellowThreshold(name, 5)}}%; red: {{redThreshold(name, 5)}}%">
    {{successRate(name, 5) | percentage:2}} | {{avgTxTime(name, 5) | number:2}} ms
  </span>
</a>

或者把逻辑写到JS方法里，更整洁：

$scope.openErrorCounts = function(name, interval, $event) {
  $event.preventDefault(); // 先阻止默认跳转
  var modalInstance = $uibModal.open({
    templateUrl: 'errorCountsDetail.html',
    scope: $scope,
    // 其他配置...
  });
}

对应的HTML改成：

<a href="#" ng-click="openErrorCounts(name, '5', $event)">

2. 替换标签为非链接元素（更彻底） #

既然这个元素只是用来触发点击事件，没必要用<a>——毕竟它的默认行为就是跳转，容易踩坑。换成<span>或者<div>，加上样式模拟链接的外观就行：

<span ng-click="openErrorCounts(name, '5')" 
      style="cursor: pointer; text-decoration: underline; color: #007bff;"
      data-toggle="tooltip" 
      title="{{totalCount(name, 5)}} records; yellow: {{yellowThreshold(name, 5)}}%; red: {{redThreshold(name, 5)}}%">
  {{successRate(name, 5) | percentage:2}} | {{avgTxTime(name, 5) | number:2}} ms
</span>

这样完全避开了锚点跳转的问题，从根源上解决滚动问题。

3. 手动保存并恢复滚动位置（兜底方案） #

如果上面的方法都没解决（比如模态框本身的逻辑影响了滚动），那就手动记录打开模态框前的滚动位置，关闭后恢复：

首先给你的表格容器加个类或者id，比如假设表格在一个带滚动的<div>里：

<div class="table-scroll-container" style="overflow-y: auto; max-height: 80vh;">
  <table class="table table-bordered">
    <!-- 表格内容 -->
  </table>
</div>

然后修改JS方法：

$scope.openErrorCounts = function(name, interval) {
  // 记录当前滚动位置
  var scrollContainer = document.querySelector('.table-scroll-container');
  $scope.savedScrollTop = scrollContainer.scrollTop;

  var modalInstance = $uibModal.open({
    templateUrl: 'errorCountsDetail.html',
    scope: $scope,
    // 其他配置...
  });

  // 模态框关闭/取消时恢复滚动位置
  modalInstance.result.finally(function() {
    scrollContainer.scrollTop = $scope.savedScrollTop;
  });
}

finally()不管模态框是确认关闭还是取消，都会执行，确保滚动位置能恢复到点击前的状态。

为什么你之前的方法没用？ #

• stopPropagation()：它只是阻止事件向上冒泡到父元素，但浏览器的默认跳转行为是事件本身的默认动作，和冒泡无关，所以没用。
• .modal-open { overflow: hidden; }：这个样式是用来隐藏背景页面的滚动条，防止模态框打开时背景滚动，但你的问题是点击链接时就已经滚动到顶部，这是锚点跳转导致的，所以这个样式解决不了根源问题。

内容的提问来源于stack exchange，提问作者David M. Karr