滚动页面内的离子滚动div

如何解决滚动页面内的离子滚动div

我需要一个 div 来在滚动的页面上滚动。我研究过这个问题，遇到了多个类似的问题，但这些解决方案都没有解决我的问题。

我用 <ion-content overflow-scroll='true'> 完成了所有工作 - 直到我意识到该设置覆盖 $ionicScrollDelegate 阻止委托滚动根本无法工作。根据同一页面/模板其他部分的特定条件，我需要 $ionicScrollDelegate.freezeAllScrolls(true/false)。

然后我转向了一个完整的 JS 解决方案，但是每次我滚动 div 时，整个页面都会随之滚动。 DIV 滚动也很慢，因此当您到达手机屏幕顶部时，只显示了少量 DIV 内容，而且 DIV 现在几乎完全看不见了。

我需要一个解决方案，该解决方案知道 DIV 何时处于焦点，以允许在保持页面静止的同时进行正常滚动 - 但是当未处于焦点时，页面可以恢复正常滚动。

<ion-content delegate-handle='pageDetails'>

<div id="eventHistory" style="height:100px;overflow-y:scroll;" ng-focus="divScroll(1);" ng-blur="divScroll(0);">
  <ion-scroll delegate-handle="historyScroll" direction="y">
     <div style="text-align:center;font-weight:bolder;">REWARD HISTORY</div>
     <table style="width:100%;text-align:left;display:table;">
       <thead>
       <tr>
         <th style="width:10%;">#</th>
         <th style="width:25%;">DATE</th>
         <th style="width:10%;">PTS</th>
         <th style="width:55%;">REWARD</th>
      </tr>
      </thead>
      <tbody>

         <tr></tr>
         .....CONTENT.....
         <tr></tr>

       </tbody>
     </table>
  </ion-scroll>
</div
</ion-content>

我在专注于 div 滚动时尝试使用冻结页面滚动的几个功能之一 -

  $scope.divScroll = function(x) {
    if (x == 0) {
      // restore page scrolling clubDetails
      //$ionicScrollDelegate.freezeScroll(false) ;
      $ionicScrollDelegate.$getByHandle('clubDetails').freezeScroll(false);
      $ionicScrollDelegate.$getByHandle('historyScroll').freezeScroll(true);
    } else {
      if ($scope.club.eventHistory.length > 12) {
        //$ionicScrollDelegate.freezeScroll(true) ;
       $ionicScrollDelegate.$getByHandle('historyScroll').freezeScroll(false);
        $ionicScrollDelegate.$getByHandle('clubDetails').freezeScroll(true);
      }
    }
  } 

充其量，即使它与 overflow-scroll='true' 一起工作（但破坏了 $ionicScrollDelegate），它也不是一个干净的解决方案，但它确实比我现在的工作要好得多。