在ios下,雙擊屏幕某些地方,滾動條會自動向上走一段。
當用微信看h5的時候,拖拽到底部,會漏出來,微信自帶下面的灰黑色皮膚。
用js解決一下吧,這倆問題很類似,總結到一起了。
----------特別注意,安卓沒有發生過這些情況,因為解決辦法是給最外層的wrapper,overflow-y:auto;也就是放棄了原生的滾動條,所以解決的時候要判斷一下系統,安卓就不用處理了。
html部分:----------------------------
<body>
<div class="wrapper">
<section>內容部分aaaa111</section>
<section>內容部分aaaa222</section>
<section>內容部分aaaa333</section>
</div>
</body>
css部分:--------------------------
.wrapper2{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow-y:auto;
-webkit-overflow-scrolling : touch;
}
js部分:----------------------------
/*阻止ios拖拽到底部還能繼續拖拽*/
var ScrollFix = function(elem) {
// Variables to track inputs
var startY, startTopScroll;
elem = elem || document.querySelector(elem);
// If there is no element, then do nothing
if(!elem)
return;
// Handle the start of interactions
elem.addEventListener('touchstart', function(event){
startY = event.touches[0].pageY;
startTopScroll = elem.scrollTop;
if(startTopScroll <= 0)
elem.scrollTop = 1;
if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
}, false);
};
/*判斷設備調用ScrollFix*/
var sUserAgent=navigator.userAgent.toLowerCase();
if(sUserAgent.match(/iphone os/i) == "iphone os"){
$('.wrapper').addClass('wrapper2');
ScrollFix($('.wrapper2')[0]);
}
/*阻止用戶雙擊使屏幕上滑*/
var agent = navigator.userAgent.toLowerCase(); //檢測是否是ios
var iLastTouch = null; //緩存上一次tap的時間
if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0)
{
document.body.addEventListener('touchend', function(event)
{
var iNow = new Date()
.getTime();
iLastTouch = iLastTouch || iNow + 1 /** 第一次時將iLastTouch設為當前時間+1 */ ;
var delta = iNow - iLastTouch;
if (delta < 500 && delta > 0)
{
event.preventDefault();
return false;
}
iLastTouch = iNow;
}, false);
}