AngularJS中mdDialog弹窗触发页面滚动至顶部的解决问询

我之前在使用AngularJS的mdDialog替代原生$window.alert时，也碰到过这个一模一样的滚动跳顶问题，给你几个经过验证的解决方案：

1. 用官方配置项保留滚动位置（最推荐） #

mdDialog其实自带了专门解决这个问题的配置参数preserveScrollPosition，你只需要在调用弹窗时加上这个配置，就能让mdDialog自动保留当前页面的滚动位置，不会修改body的top值：

// 你的showAlert方法里的mdDialog调用代码
function showAlert(message) {
  $mdDialog.show(
    $mdDialog.alert()
      .textContent(message)
      .ok('确定')
      .preserveScrollPosition(true) // 加上这行！
  );
}

这个参数是Material Design for AngularJS官方提供的，专门用来避免弹窗时页面滚动到顶部的问题，不用修改任何CSS就能解决核心问题。

2. 调整CSS规则，避免冲突 #

如果因为某些原因不能使用上面的配置，可以修改你的CSS规则，不要强制给.md-dialog-is-showing设置top: 0 !important;，而是针对弹窗容器做调整，同时禁止页面滚动：

/* 移除原来的.top:0 !important; */
.md-dialog-is-showing {
  overflow: hidden; /* 弹窗时禁止页面滚动 */
  position: relative !important; /* 防止body被设置为fixed导致的位置偏移 */
}

/* 确保弹窗正常显示 */
.md-dialog-container {
  position: fixed !important;
  top: 20px !important; /* 可以自定义弹窗的初始位置 */
}

这样既不会让body自动生成的top值影响页面显示，也能阻止滚动跳顶的问题。

3. 手动拦截body的style修改（备用hack方案） #

如果前两种方法都不生效，可以用一个小hack来监听body的style变化，当mdDialog打开时，强制恢复正确的滚动位置：

// 在你的根控制器或者公共服务里添加这段代码
angular.module('yourApp').controller('RootController', function($scope, $timeout) {
  $scope.$watch(function() {
    return angular.element(document.body).hasClass('md-dialog-is-showing');
  }, function(isShowing) {
    if (isShowing) {
      $timeout(function() {
        // 记录当前滚动位置
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        // 重置body的top值
        document.body.style.top = '0px';
        // 恢复滚动位置
        window.scrollTo(0, scrollTop);
      }, 0);
    }
  });
});

不过这个方法属于应急方案，优先推荐前两种更优雅的官方/样式解决方案。

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