禁止iOS的彈性滾動 微信的下拉回彈


禁止iOS的彈性滾動 微信的下拉回彈

一種方法:

html頭部添加

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

然后將頁面body的高度設為window的高度

 $("body").height( $(window).height() );

其他方法

頁面高度超過設備可見高度時,阻止掉touchmove事件。

document.body.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);



/**
 * 禁止瀏覽器下拉回彈
 */
function stopDrop() {
    var lastY;//最后一次y坐標點
    $(document.body).on('touchstart', function(event) {
        lastY = event.originalEvent.changedTouches[0].clientY;//點擊屏幕時記錄最后一次Y度坐標。
    });
    $(document.body).on('touchmove', function(event) {
        var y = event.originalEvent.changedTouches[0].clientY;
        var st = $(this).scrollTop(); //滾動條高度
        console.log("st = "+st);
        if (y >= lastY && st <= 0) {//如果滾動條高度小於0,可以理解為到頂了,且是下拉情況下,阻止touchmove事件。
            lastY = y;
            event.preventDefault();
        }
        lastY = y;

        //方法三
        // var abc=$(document.body).scrollTop();
        // console.log("abc = "+abc);
        // if (abc>0) {
        //   $(document.body).scrollTop(0);
        // }
    });
}
stopDrop();


https://segmentfault.com/q/1010000000322091


免責聲明!

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



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