禁止body滾動容許div滾動防微信露底

最近遇到一個需求，頁面中只有一個div容許滾動，其餘內容不容許滾動。

正常來說加上

body{height:100%;overflow: hidden;} 

應該就阻止頁面滾動了。但是很悲催的是手機端並不能很好的執行，並且還有彈性效果。
因此只能對默認的滾動進行干涉。
首先禁止body

document.body.ontouchmove = function (e) { e.preventDefault(); }; 

而後取得觸摸點的座標

var startX = 0, startY = 0; //touchstart事件 function touchSatrtFunc(evt) { try { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等 var touch = evt.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X座標 var y = Number(touch.pageY); //頁面觸點Y座標 //記錄觸點初始位置 startX = x; startY = y; } catch (e) { alert('touchSatrtFunc：' + e.message); } } document.addEventListener('touchstart', touchSatrtFunc, false); 

而後對容許滾動的div進行判斷

var _ss = document.getElementById("div的id"); _ss.ontouchmove = function (ev) { var _point = ev.touches[0], _top = _ss.scrollTop; // 何時到底部 var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight; // 到達頂端 if (_top === 0) { // 阻止向下滑動 if (_point.clientY > startY) { ev.preventDefault(); } else { // 阻止冒泡 // 正常執行 ev.stopPropagation(); } } else if (_top === _bottomFaVal) { // 到達底部 // 阻止向上滑動 if (_point.clientY < startY) { ev.preventDefault(); } else { // 阻止冒泡 // 正常執行 ev.stopPropagation(); } } else if (_top > 0 && _top < _bottomFaVal) { ev.stopPropagation(); } else { ev.preventDefault(); } }; 

這樣處理完後，就只能指定的div滾動了。
變通一下，就能夠實現微信防露底

 

 

 

 

 

 

 

 

 

 

 

 

 

 

最近作移動端,老是遇到很蛋疼的問題, 決定把一些黑魔法記下來, 微信瀏覽器中想必會有不少事情讓我大前端小夥伴頭疼,
23333終於皇天不負有心人, 在網上找到了一個能夠防頁面滾動滑到頂端或底部的時候, 漏出微信醜醜的灰色底[/偷笑]
原文網址:https://blog.ghostry.cn/program/702.html個人核心代碼:prevent:function () {    var startX = 0, startY = 0;    //touchstart事件    function touchSatrtFunc(evt) {        try        {            //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等            var touch = evt.touches[0]; //獲取第一個觸點            var x = Number(touch.pageX); //頁面觸點X座標            var y = Number(touch.pageY); //頁面觸點Y座標            //記錄觸點初始位置            startX = x;            startY = y;        } catch (e) {            alert('touchSatrtFunc：' + e.message);        }    }    document.addEventListener('touchstart', touchSatrtFunc, false);    var _ss = document.getElementById("contain");    _ss.ontouchmove = function (ev) {        var _point = ev.touches[0],            _top = _ss.scrollTop;        // 何時到底部        var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;        // 到達頂端        if (_top === 0) {            // 阻止向下滑動            if (_point.clientY > startY) {                ev.preventDefault();            } else {                // 阻止冒泡                // 正常執行                ev.stopPropagation();            }        } else if (_top === _bottomFaVal) {            // 到達底部            // 阻止向上滑動            if (_point.clientY < startY) {                ev.preventDefault();            } else {                // 阻止冒泡                // 正常執行                ev.stopPropagation();            }        } else if (_top > 0 && _top < _bottomFaVal) {            ev.stopPropagation();        } else {            ev.preventDefault();        }    };}