針對 iOS端禁止列表頂部下拉和底部上拉露出瀏覽器灰色背景 的解決方案。
阿新 • • 發佈:2019-01-31
在iOS的微信,QQ,Safari等瀏覽器, 列表頂部下拉和底部上拉露出瀏覽器灰色背景。
針對此問題,在一些移動端頁面下拉、上拉過程導致瀏覽器底部露出背景。 在一定程度上會影響使用者的正常操作 以及 使用者體驗。
省下好多喝茶的片刻,以及找過網上類似的解決方法。 終於想到一套能夠很好解決此類問題的辦法!
需要解決此刻需求的朋友參考文章,提供給大家思路以及參考學習。
具體實現步驟以及思路,2步
1、定義需要滾動的區域容器,#scrollWrap, 注意設定高度百分比或者畫素值 和 overflow: auto;。 監聽#scrollWrap 滾動,其滾動條到達頂部(scrollTop = 0) 以及 滾動條到達底部((scrollTop / (contentHeight - viewHeight)) == 1) 時 禁用移動端touchmove 事件
2、監聽容器touchstart 以及 touchmove事件。滾動條到達頂部,禁用下拉手勢的touchmove 事件。反之滾動條到達底部,禁用容器上拉手勢touchmove 事件。
以下提供例項參考使用。
1、構建內容主體。
<div id="scrollWrap">
//主體內容,請隨意,別刻意。
</div>
2、設定容器主體 #scrollWrap 樣式。
html,body{
margin: 0;
height: 100%;
width: 100%;
-webkit-overflow-scrolling: touch ;
-webkit-overflow-scrolling: touch;
}
#scrollWrap{
/*注意必須是設定 容器的有效高度*/
height: 100%;
overflow: auto;
}
3、阻止移動端 touchmove 事件的具體JS處理邏輯。
//滾動條是否在頂部
var isScroll_top = true;
//滾動條是否在底部
var isScrill_bottom = false;
function restoreEvent(event) {
switch(event.type){
case "touchstart" :
$startY = event.touches[0].clientY;
break;
case "touchmove" :
$moveY = event.touches[0].clientY;
//滑動距離
touchesY = $startY - $moveY;
//滾動條頂部
if(isScroll_top) {
if(touchesY < 0) {
event.preventDefault();
}else{
var scrollWrap = document.getElementById("scrollWrap");
if(scrollWrap.scrollHeight == scrollWrap.clientHeight) {
event.preventDefault();
}else {
event.stopPropagation();
}
}
//滾動條底部
}else if(isScrill_bottom){
if(touchesY > 0) {
event.preventDefault();
}else{
event.stopPropagation();
}
}
break;
case "touchend" :
break;
}
}
/*監聽容器的 touch 觸發事件處理邏輯*/
document.getElementById("scrollWrap").addEventListener("touchstart",restoreEvent);
document.getElementById("scrollWrap").addEventListener("touchmove",restoreEvent);
document.getElementById("scrollWrap").addEventListener("touchend",restoreEvent);
/*監聽容器 scroll 滾動事件處理邏輯*/
document.getElementById("scrollWrap").addEventListener("scroll",function() {
var tabView = document.getElementById("scrollWrap");
var contentHeight = tabView.scrollHeight, //內容高度
scrollTop = tabView.scrollTop; //滾動高度
viewHeight = tabView.clientHeight;
if(scrollTop == 0) {
isScroll_top = true;
}else{
isScroll_top = false;
}
if ((scrollTop / (contentHeight - viewHeight)) == 1 ) {
isScrill_bottom = true;
}else {
isScrill_bottom = false;
}
});
到此就結束了。如在哪裡地方有些不適,歡迎留言提出建議、指點。 或者加入Q群 595377655學習討論。