Chỉ thị AngularJS cho chế độ xem thỏa thuận người dùng, phát hiện nút bật, không hoạt động trên safari di động

Question

Tôi có màn hình thỏa thuận người dùng. Về cơ bản, chế độ xem HTML có khung nội tuyến và nút. Tôi muốn bật nút khi người dùng cuộn xuống dưới cùng. Tính năng này hoạt động với tất cả các trình duyệt dành cho máy tính để bàn, IE, Chrome, Safari nhưng không hoạt động trên safari di động hoặc chrome trên thiết bị ios. Dường như sự kiện 'di chuyển' không được đính kèm đúng cách. Bạn có thấy một cái gì đó ở đây mà sẽ làm cho công việc đó?

(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

Sự kiện cuộn không hoạt động trên thiết bị di động khi chúng hoạt động trên máy tính để bàn. Về bản chất, sự kiện cuộn chỉ được kích hoạt ở cuối cuộn. Thấy điều này:

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

Answer 2

Như Mark cho biết, sự kiện cuộn là một vấn đề về điện thoại di động - đặc biệt là trong các thiết bị iOS cũ hơn như họ tạm dừng thực hiện JS trong di chuyển. Nó là một phần cố định trong IOS 8, một phần tôi có nghĩa là vấn đề được cố định trong safari, nhưng không phải trong webview (cũng không phải trong bất kỳ trình duyệt khác đang chạy trên iOS).

Android gọi tốc độ bị tắt, vì cuộn không đồng bộ trong chrome. Thao tác DOM/vẽ lại nhiều hơn nữa - nhưng nó vẫn hoạt động chính xác cho trường hợp của bạn.

Để giải quyết sự cố bạn đang gặp phải, tất cả những gì bạn có thể làm là thiết lập hẹn giờ/khoảng thời gian (tốt cho < iOS 8 trong safari hoặc trong webview/cordova < iOS 9) và kiểm tra thuộc tính scrollTop. Hoặc bạn phải thay đổi thiết kế của mình, ví dụ: để người dùng phải cuộn xuống để xem nút 'đóng'.