AngularJS指令用于用户协议视图，检测启用按钮，不适用于移动safari

Question

我有一个用户协议屏幕。基本上是一个带有iframe和按钮的HTML视图。我想在用户滚动到底部时启用该按钮。这适用于所有桌面浏览器，IE，Chrome，Safari，但不适用于移动Safari或ios设备上的Chrome。"滚动"事件似乎没有正确附加。你在这里看到什么能让它发挥作用吗？

(function() {
  angular.module('myapp').directive('textAgreement', function($timeout, ActivityLogService) {
    return {
      restrict: 'A',          
      scope: {
        onscrollCallback: '&onscrollCallback',
        onloadCallback: '&onloadCallback'
      },
      compile: function(tElement) {        
        return function(scope, element) {
          /** Called on load **/
          var appliedCheck = function(event) {
            try {
              if (typeof scope.onloadCallback !== undefined) {
                if (typeof scope.onloadCallback == 'function') {                      
                  scope.onloadCallback();  
                  scope.$apply();
                }
              } 
              var elm = element[0].contentWindow.document.body;
              var newwin = element[0].contentWindow;            
              if (elm) {
                $(newwin).scroll(function() {
                  var checkBottom = (elm.scrollTop+600) >= elm.scrollHeight;
                  console.log('###$$$ +++++ ' + elm.scrollTop +  ' ' + elm.scrollHeight);                                   
                  if (checkBottom) {        
                    scope.bottom = true;
                    if (typeof scope.onscrollCallback !== undefined) {
                      if (typeof scope.onscrollCallback == 'function') {                      
                        scope.onscrollCallback();  
                        scope.$apply();
                      }
                    }                  
                  }
                });                
              }
            } catch(e) {
              console.log(e);              
            }
          }; 
          element.bind('load', appliedCheck);                                    
        }; 
      }    
    };
  });   
})();
            <iframe text-agreement onload-callback="disableLoading()" onscroll-callback="enableAgree()" id="agreeFrame" src="{{ ::trustSrcAgreementUri }}" style="border:0" width="100%" height="100%"></iframe>

Answer 1

滚动事件在移动设备上不起作用，因为它们在桌面上起作用。从本质上讲，滚动事件只在滚动结束时触发。请参阅：

http://andyshora.com/mobile-scroll-event-problems.html

Answer 2

正如Mark所说，滚动事件在移动设备上是一个问题，尤其是在旧的iOS设备中，因为它们在滚动过程中暂停JS执行。它在IOS 8中得到了部分修复，我的意思是，这个问题在safari中得到了修复，但在webview中没有（也没有在IOS上运行的任何其他浏览器中）。

Android以抑制的速率调用它，因为滚动在chrome中是异步的。DOM操作/重新绘制的滞后性更大，但它仍然可以正常工作。

要解决您遇到的问题，您所能做的就是设置计时器/间隔（适用于safari或webview/cordova<iOS 9中的<iOS8）并检查scrollTop属性。或者您必须更改您的设计，例如，用户必须一直向下滚动才能看到"关闭"按钮。