方法一:(我用了但是没起作用,可以忽略看方法二)
<preference name="WebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="false"/>
将上面代码复制根目录config.xml配置文件里面
方法二:
第一步:将body设置为
body{
position:fixed;
width: 100%;
}
第二步:在main.js里面对ios界面进行控制
//ios 界面拖拽会出现顶部或者底部脱离位置的滑动现象
document.querySelector('body').addEventListener('touchmove', function(e) {
//禁止顶部拖动
if (document.querySelector('.topnavbar').contains(e.target)) {
e.preventDefault();
}
//禁止底部拖动
if (document.querySelector('.bottombar').contains(e.target)) {
e.preventDefault();
}
//对中间部分拖动进行优化
var content = document.querySelector('.centerpage');
var startY;
content.addEventListener('touchstart', function (e) {
startY = e.touches[0].clientY;
});
content.addEventListener('touchmove', function (e) {
// 高位表示向上滚动
// 底位表示向下滚动
// 1容许 0禁止
var status = '11';
var ele = this;
var currentY = e.touches[0].clientY;
if (ele.scrollTop === 0) {
// 如果内容小于容器则同时禁止上下滚动
status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
} else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
// 已经滚到底部了只能向上滚动
status = '10';
}
if (status != '11') {
// 判断当前的滚动方向
var direction = currentY - startY > 0 ? '10' : '01';
// 操作方向和当前允许状态求与运算,运算结果为0,就说明不允许该方向滚动,则禁止默认事件,阻止滚动
if (!(parseInt(status, 2) & parseInt(direction, 2))) {
e.preventDefault();
}
}
});
})
欢迎关注【哎呦程序猿公众号】,带给你更多前端干货!