La direttiva AngularJS per la visualizzazione di un contratto utente, il pulsante di attivazione rilevamento, non funziona su Safari mobile

Question

Ho una schermata di accordo utente. Fondamentalmente una visualizzazione HTML con un iframe e un pulsante. Voglio abilitare il pulsante quando l'utente scorre verso il basso. Funziona su tutti i browser desktop, IE, Chrome, Safari ma non funziona su Safari mobile o Chrome su dispositivi iOS. Sembra che l'evento 'scrolling' non venga applicato correttamente. Vedete qualcosa qui che farebbe funzionare?

(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

Gli eventi di scorrimento non funzionano sui dispositivi mobili mentre funzionano sul desktop. In sostanza, l'evento di scorrimento viene attivato solo alla fine della pergamena. Vedere questo:

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

Answer 2

Come disse Mark, evento di scorrimento è un problema sul cellulare - soprattutto in anziani dispositivi iOS come sospendere l'esecuzione JS durante lo scorrimento. È parzialmente risolto in IOS 8, in parte intendo che il problema è stato risolto in Safari, ma non in Webview (né in altri browser in esecuzione su iOS).

Android invoca una velocità soppressa, poiché lo scorrimento è asincrono in chrome. Manipolazione DOM/ritaratura ritarda ancora di più - ma funzionerà ancora correttamente per il tuo caso.

Per risolvere il problema riscontrato, tutto ciò che si può fare è impostare il timer/intervallo (bene per < iOS 8 in safari o in webview/cordova < iOS 9) e ispezionare la proprietà scrollTop. O devi cambiare il tuo design, ad es. in modo che l'utente debba scorrere fino in fondo per vedere il pulsante 'Chiudi'.