AngularJS中移动页面滚动穿透解决方案

时间:2021-02-13 05:58:55
(function (angular) {
angular.module('mobileApp').factory('IscrollAndroidBug', IscrollAndroidBug);
function IscrollAndroidBug() {
return {
click: function () {
if (/iPhone|iPad|iPod|Macintosh/i.test(navigator.userAgent)) {return false;}
if (/Chrome/i.test(navigator.userAgent)) {return (/Android/i.test(navigator.userAgent));}
if (/Silk/i.test(navigator.userAgent)) {return false;}
if (/Android/i.test(navigator.userAgent)) {
var s = navigator.userAgent.substr(navigator.userAgent.indexOf('Android') + 8, 3);
return parseFloat(s[0] + s[3]) >= 44;
}
}
};
}
}(angular));
$scope.$on('ngRepeatListFinished', function () {
var _scroll = new IScroll('#scroller', {
probeType: 3,
preventDefault: false,
click: IscrollAndroidBug.click()
});
var _ele = document.getElementById('apply-requirment');
_ele.addEventListener('touchmove', function(e){
e.preventDefault();
}, false);
_ele = document.getElementById('scroller');
_ele.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
});
<div id="apply-requirment" class="requirment-container" ng-if="maskLayerIndex != null" ng-cloak>
<div ng-click="closeMasking()"></div>
<div>
<div class="terms-list" ng-if="maskLayerIndex != null">
<div>
<span class="icon-cancel" ng-click="closeMasking()"></span>
<span ng-bind="maskLayers[maskLayerIndex].title"></span>
</div>
<div id="scroller">
<div>
<ul>
<li ng-class="($index==maskLayers[maskLayerIndex].sel)?'condition-checked':'condition-unchecked'"
ng-repeat="item in maskLayers[maskLayerIndex].text track by $index"
on-finish-render-filters="ngRepeatListFinished"
ng-click="onListItemClicked($event, $index)">
<span ng-bind="item"></span>
<span ng-show="$index==maskLayers[maskLayerIndex].sel" class="icon-check"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>