Ionic v1 iOS下select弹出后视图上移致tabs空白的修复咨询

这个问题我之前做Ionic v1项目时也碰到过，iOS的原生select组件确实会有这种“小毛病”——弹出时自动上滚页面，关闭后却不把视图恢复回去，导致底部tabs下方出现空白。下面给你几个亲测有效的解决方案：

方案1：给单个select添加blur事件恢复滚动 #

这是最直接的方法，针对出现问题的select单独处理：

首先修改你的select标签，添加ng-blur事件：

<select ng-options="x for x in $ctrl.startTimes" ng-blur="$ctrl.resetScroll()"></select>

然后在对应的控制器里注入$ionicScrollDelegate，实现resetScroll方法：

angular.module('yourApp').controller('CalendarTabCtrl', ['$ionicScrollDelegate', function($ionicScrollDelegate) {
  var vm = this;

  vm.resetScroll = function() {
    // 延迟100ms执行，确保iOS的select弹窗完全关闭后再调整滚动
    setTimeout(function() {
      // 滚动到当前视图的顶部（无动画）
      $ionicScrollDelegate.scrollTop(false);
      // 如果上面的方法不生效，试试直接调整window的滚动位置：
      // window.scrollTo(0, 0);
    }, 100);
  };

  // 你的其他控制器逻辑...
}]);

方案2：自定义全局指令，批量处理所有select #

如果项目里有多个select都有这个问题，可以写一个自定义指令，避免重复代码：

先创建指令：

angular.module('yourApp').directive('fixIosSelectScroll', ['$ionicScrollDelegate', function($ionicScrollDelegate) {
  return {
    restrict: 'A',
    link: function(scope, element) {
      let originalScrollPos = 0;

      // 记录select打开前的滚动位置
      element.on('focus', function() {
        originalScrollPos = window.pageYOffset;
      });

      // 关闭select时恢复到原来的滚动位置
      element.on('blur', function() {
        setTimeout(function() {
          window.scrollTo(0, originalScrollPos);
          // 或者针对Ionic的滚动容器：
          // $ionicScrollDelegate.scrollTo(0, originalScrollPos, false);
        }, 100);
      });
    }
  };
}]);

然后在所有需要修复的select上使用这个指令：

<select ng-options="x for x in $ctrl.startTimes" fix-ios-select-scroll></select>

为什么会出现这个问题？ #

本质上是iOS原生select组件的默认行为：当弹出选择器时，系统会自动调整页面滚动位置，让select控件处于可视区域内，但关闭选择器后，系统不会自动将页面滚回原来的位置，而Ionic v1的tabs组件是固定定位的，就会出现底部空白的视觉问题。

内容的提问来源于stack exchange，提问作者I. Ahmed