页面高度获取

最新推荐文章于 2023-08-07 12:00:43 发布

wangzhongquan_

最新推荐文章于 2023-08-07 12:00:43 发布

阅读量694

点赞数

在另一个前端开发技术文章中发现页面高度的获取中有所不解，故在网上找到相关的内容，与大家共享下，其中包含各种滚动条中需要获取高度的方式，当用户将滚动条滑到底部时做相应的操作，需要绑定scroll事件，如

$("#test").scroll(function() {
			//div中可见部分高度，即该DIV的固定高度
			var viewH = $(this).height();
			//DIV中的内容部分高度，包含不可见部分
			var contentH = $(this).get(0).scrollHeight;
			//滚动条距离DIV顶部高度
			var scrollTop = $(this).scrollTop();			
			window.console.log(viewH + "-" + contentH + "-" + scrollTop);
		});

js获取页面各种高度

网页可见区域宽：document.body.clientWidth;
网页可见区域高：document.body.clientHeight;
网页可见区域高：document.body.offsetWidth ;
网页可见区域高：document.body.offsetHeight ;
网页正文全文宽：document.body.scrollWidth;
网页正文全文高：document.body.scrollHeight;
网页被卷去的高：document.body.scrollTop;
网页被卷去的左：document.body.scrollLeft;
网页正文部分上：window.screenTop;
网页正文部分左：window.screenLeft;
屏幕分辨率的高：window.screen.height;
屏幕分辨率的宽：window.screen.width;
屏幕可用工作区高度：window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;