h5获取滚动条位置

最新推荐文章于 2024-03-13 17:06:16 发布

weixin_48597380

最新推荐文章于 2024-03-13 17:06:16 发布

阅读量1.3k

点赞数

文章标签： javascript vue js

本文链接：https://blog.youkuaiyun.com/weixin_48597380/article/details/109364299

版权

本文介绍了在H5中如何使用JavaScript和Vue.js获取页面滚动条的位置，以实现更精细的页面交互控制。

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

h5获取滚动条位置

		  	methods:{
				handleScroll: function () {
                    //变量scrollTop是滚动条滚动时，距离顶部的距离
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    //变量windowHeight是可视区的高度
                    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    //变量scrollHeight是滚动条的总高度
                    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                    //滚动条到底部的条件
                    if (scrollTop + windowHeight == scrollHeight) {
                        this.page += 1;
                        this.getData();
                        //写后台加载数据的函数
                        console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
                    }
                }
            },

			mounted(){
				window.addEventListener('scroll', this.handleScroll)
			},
			destroyed() {
   				window.removeEventListener("scroll", this.handleScroll);
 			},

或者是

				window.onscroll = function () {
                    //变量scrollTop是滚动条滚动时，距离顶部的距离
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    //变量windowHeight是可视区的高度
                    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    //变量scrollHeight是滚动条的总高度
                    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                    console.log(scrollTop);
                    //滚动条到底部的条件
                    if (scrollTop + windowHeight == scrollHeight) {
                         this.page += 1;
                         this.getData();
                    }
                }