Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS directive for a user agreement view, detect enabling button, does not work on mobile safari

I have a user agreement screen. Basically a HTML view with an iframe and a button. I want to enable the button when the user scrolls to the bottom. This works for all desktop browsers, IE, Chrome, Safari but doesn't work on mobile safari or chrome on ios devices. It seems that the 'scrolling' event doesn't get attached properly. Do you see something here that would make that work?

(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>
like image 256
Berlin Brown Avatar asked Nov 23 '15 16:11

Berlin Brown


1 Answers

Scroll events don't work on mobile as they work on the desktop. In essence, the scroll event is only fired at the end of the scroll. See this:

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

like image 188
Mark Avatar answered Sep 27 '22 21:09

Mark