微信H5单页面滑动的时候如何避免出界，出现头部和底部的黑底？

本文链接：https://blog.youkuaiyun.com/weixin_39086969/article/details/110875660

本文档详细记录了在开发微信公众号时遇到的滚动监听问题及其解决方案。开发者通过Vue.js实现页面监听，针对触屏事件进行处理，避免了滚动到顶部和底部时的异常情况。同时，提供了CSS样式以隐藏滚动条并固定页面位置。代码示例展示了如何初始化监听、处理触屏事件以及防止页面过度滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一直在开发微信公众号，前后端都自己开发，遇到测试提出的这个问题？

再次做记录，需要配合js和css样式，不然虽然实现了监听但是还是会出现偶尔那个问题

var userOrderList = new Vue({
    el : '#app',
    data : function () {
        return {
            userOrderRoomList:[],
            path:""
        }
    },
    created:function() {
        this.pushHistory();
        this.initListen();

    },
    mounted : function() {
        sessionStorage.setItem("orderInfo","");
        this.orderList();
        this.overscroll(document.querySelectorAll('.container'));

    },
    methods : {
        //初始化监控
        initListen:function(){
            document.querySelector('#app').addEventListener('touchstart', function (ev) {
                let a=$('#app')[0].scrollTop;
                if($('#app')[0].scrollTop <=0){
                    $('#app')[0].scrollTop =1
                }
            });

            document.body.addEventListener('touchmove', function (evt) {
                if (!evt._isScroller) {
                    evt.preventDefault();
                }
            })
        },
        overscroll:function(els) {
            for (var i = 0; i < els.length; ++i) {
                var el = els[i];
                el.addEventListener('touchstart', function () {
                    var top = this.scrollTop , totalScroll = this.scrollHeight , currentScroll = top + this.offsetHeight
                    if (top === 0) {
                        this.scrollTop = 1;
                    } else if (currentScroll === totalScroll) {
                        this.scrollTop = top - 1;
                    }
                });
                el.addEventListener('touchmove', function (evt) {
                    if (this.offsetHeight < this.scrollHeight)
                        evt._isScroller = true;
                });
            }
        },
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 条件注释 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
	<![endif]-->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>教室预约</title>

	<style type="text/css">
.container::-webkit-scrollbar {
			display: none;
		}
		body{
			position: fixed;
			left: 0;
			top:0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	</style>
</head>
<script type="text/javascript">
</script>
<body>
<div id="app" v-cloak class="container">
</div>
</body>