ios上拉下划出现黑色背景的解决办法

移动端页面位于最顶部时下划，上方总会出现黑色的背景，而
ios中，页面划动到底部时继续上划同样会出现黑色背景，不过这其实并不是什么大问题。

但我们在开发过程中发现，页面往上滑动速度稍快一点，即使页面还没到底，下方黑色背景也会偶尔出现，影响到了正常的滑动体验，所以我们想出了一个解决办法。

function moveAdjustment(domId){document.documentElement.ontouchmove=function(e){e.preventDefault();};var wrap=document.getElementById(domId);wrap.addEventListener('touchstart',function(e){var startPoint=e.touches[0].clientY;wrap.ontouchmove=function(e){var movePoint=e.touches[0].clientY;var nowScroll=wrap.scrollTop;var wholeScroll=wrap.scrollHeight-wrap.clientHeight;if(nowScroll==0){if(startPoint<movePoint){e.preventDefault();}else{e.stopPropagation();};}else if(nowScroll==wholeScroll){if(startPoint>movePoint){e.preventDefault();}else{e.stopPropagation();}}else if(nowScroll>0 && nowScroll<wholeScroll){e.stopPropagation();}else{e.preventDefault();};};},false);
};moveAdjustment('wrap');

这种方法的主要原理就是在三种不同状态（页面位于顶部、页面拉到底部以及除这两种状态以外的状态）下比较触摸点在垂直方向的偏移值大小来禁用和解放页面的滑动功能。

不过也因此，使得这种方法并不完美：首先，在没有滚动条出现的情况下是没有效果的；其次，从底部滑动回到顶部的时候也是没有效果的。

但目的我们是达到了，设置了之后，在页面滑动到底部之前都不会出现下方的黑色背景而影响体验。

最后需要注意一下，使用这种方法时需要配合一点css样式：

.wrap{overflow:auto;max-height:100vh;-webkit-overflow-scrolling:touch;
}

最后的最后，希望大家能不吝赐教，指出问题或提出优化方法。

ios上拉下划出现黑色背景的解决办法相关推荐

坑！！！高清解决方案导致iOS 上h5页面滑不动的解决办法
首选这个问题出现在我们一个h5页面的首页上,滑不动!在iPhone X和iPhone 11上并且系统版本发现是13.2.2,而iPhone X Max 系统版本12.2的并没有出现.所以我估摸着应 ...
联想笔记本电脑老是自动选择桌面上最后一个图标,而且浏览网页鼠标自动拉到最底部的解决办法
联想笔记本电脑老是自动选择桌面上最后一个图标,而且选择其他的图标总是会打开最后一个图标,打开网页或者我的电脑滚动条会自动下拉到最底部下面编程爱好者之家为大家带来解决办法临时解决方案一: 开机后连续 ...
ThreadLocal 遇上线程池的问题及解决办法
ThreadLocal 遇上线程池的问题及解决办法参考文章: (1)ThreadLocal 遇上线程池的问题及解决办法 (2)https://www.cnblogs.com/qifenghao/p/ ...
(OS 10038)在一个非套接字上尝试了一个操作的解决办法
在SVN的机器上,系统盘,剩余空间不足1G, 经查看,是C:\Program Files (x86)\Apache Software Foundation\Apache2.2\logs里面存在了很多( ...
解决uniapp小程序打包体积超过2M，提示包体积超过2M，“main packagexxx”,不给上传和预览的解决办法，绝对有效
解决办法,原文地址: 解决uniapp小程序打包体积超过2M,提示包体积超过2M,"main packagexxx",不给上传和预览的解决办法,绝对有效!在微信小程序开发中,为了解 ...
iOS不能跳转到支付宝的解决办法
iOS不能跳转到支付宝的解决办法对接APP/H5支付时,可能会遇到在加载支付页面时,不能跳转到支付宝app(手机已经安装支付宝),目前iOS版本解决办法如下以UIWebView为例 android ...
电脑连上wifi但不能上网的解决办法
电脑连上wifi但不能上网的解决办法今天在打开电脑连接wifi时遇到了点问题,就是明明连上了却不能识别网络,找了很久解决了,记录一下,以免下次再遇到. 之前试了很多网友说的更改配置器,发现没用.后来 ...
ios 上拉加载下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
微信小程序播放语音|audio播放mp3|audio播放音频在IOS|苹果手机上外放没声音，戴上耳机就有声音【解决办法记录】
以前项目中遇到的问题,今天同事问到了,在这里记录一下语音播放使用的 wx.createInnerAudioContext() 诡异问题记录: 在安卓上都没问题,语音发送接收之后播放都没问题,就是在 ...

ios上拉下划出现黑色背景的解决办法

ios上拉下划出现黑色背景的解决办法相关推荐

最新文章

热门文章