我有一个用户协议屏幕.基本上是带有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>
解决方法
滚动事件在桌面上的移动设备上不起作用.实质上,滚动事件只在滚动结束时触发.见：
http://andyshora.com/mobile-scroll-event-problems.html