h5頁面ios,雙擊向上滑動,拖拽到底部還能繼續拖拽(露出黑色背景)


h5頁面ios,雙擊向上滑動,拖拽到底部還能繼續拖拽

標簽: 手機
 

在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);
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM