I found an ugly gray bottom of WeChat when I was found on the Internet when I could prevent the page from scrolling to the top or bottom, and the editor will share the core code with you for your reference!
My core code:
prevent:function () {var startX = 0, startY = 0;//touchstart event function touchSatrtFunc(evt) {try{//evt.preventDefault(); //Block browser scaling, scrolling, etc. var touch = evt.touches[0]; //Get the first contact var x = Number(touch.pageX); //Page contact X coordinate var y = Number(touch.pageY); //Page contact Y coordinate //Record the initial position of the contact 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;// When to the bottom var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;// To reach the top if (_top === 0) {// Prevent sliding down if (_point.clientY > startY) {ev.preventDefault();} else {// Prevent bubbles// Execute ev.stopPropagation();}} else if (_top === _bottomFaVal) {// Reach the bottom// Prevent slide up if (_point.clientY < startY) {ev.preventDefault();} else {// Prevent bubbles// Execute ev.stopPropagation();}} else if (_top > 0 && _top < _bottomFaVal) {ev.stopPropagation();} else {ev.preventDefault();}};}The above code is the core code for scrolling and preventing the bottom of the WeChat page introduced to you by the editor. The code is relatively simple. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time!