JS三大家族之scroll家族和client家族

最新推荐文章于 2021-08-14 13:54:25 发布

头上三尺很有神

最新推荐文章于 2021-08-14 13:54:25 发布

阅读量207

点赞数

分类专栏： js 前端文章标签： js css html javascript html5

本文链接：https://blog.csdn.net/weixin_45060872/article/details/105454165

版权

前端同时被 2 个专栏收录

62 篇文章 0 订阅

订阅专栏

28 篇文章 0 订阅

订阅专栏

JS 三大家族之scroll家族和client家族

Scroll家族

scroll家族:scrollWidth scrollHeight scrollLeft scrollTop

scrollWidth scrollHeight （不包括border）

scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。
scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。
作用：获取元素内容真实的宽高仅限于IE8

scrollLeft scrollTop

scrollLeft、 scrollTop是获取元素内容真实得到的位置,
scrollLeft ：返回元素左边缘与视图之间的距离，（返回或设置匹配元素的滚动条的水平位置。）
这里的视图指的是元素的内容（包括子元素以及内容）。
scrollTop ：返回元素上边缘与视图之间的距离。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				border: 1px solid pink;
				
				overflow: auto;
			}
			img{
				vertical-align: top;
				/* width: 300px;
				height: 300px; */
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="./img/5dd3a066a1691.jpg" >
		</div>
	</body>
	<script type="text/javascript">
		var box=document.getElementById("box");
		
		//offset家族:获取元素真实的宽高和位置
		console.log(box.offsetWidth);//202
		console.log(box.offsetHeight);//202
		
		//scroll家族:scrollWidth scrollHeight scrollLeft scrollTop
		console.log(box.scrollWidth);//1920 
		console.log(box.scrollHeight);//1200
		
		console.log(box.scrollLeft);//0
		console.log(box.scrollTop);//0
	</script>
</html>

scroll家族兼容性问题

获得scrollTop 或者 scrollLeft的值有三种方式

1.支持谷歌浏览器和没有声明<!DOCTYPE html>：

document.body.scrollTop
document.body.scrollLeft

2.支持火狐和其它浏览器:

document.documentElement.scrollTop
document.documentElement.scrollLeft

3.支持ie9+ 和最新浏览器 :

window.pageXOffset
window.pageYOffset

兼容性封装：

//方法一：（scrollLeft兼容封装，scrollTop同理）
		 function getPageScroll(){
		 	//能力检测
		 	if(window.pageXOffset){ //说明是谷歌火狐
				return window.pageXOffset;
		 	}else if(document.documentElement.scrollLeft){ //IE8
		 		return document.documentElement.scrollLeft;
		 	}else{
		 		return document.body.scrollLeft;
		 	}
		 }

//方法二:
		function getPageScroll(){
			//逻辑或的短路运算规则：找真
			//如果这几种情况都不满足，那么就返回undefined  但是有的浏览器不支持undefined
			var left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;
			var top=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
			//函数返回值
			return {
				scrollLeft:left,
				scrollTop:top
			}
		
		}
		
		console.log(getPageScroll().scrollLeft,getPageScroll().scrollTop);

client家族

client家族的作用：获取页面的可视区域

clientWidth 获取网页可视区域宽度（两种用法）
clientHeight 获取网页可视区域高度（两种用法）

调用者不同，意义不同：
盒子调用：指盒子本身。
body/html调用：可视区域大小。

clientX：鼠标距离可视区域左侧距离（event调用）
clientY：鼠标距离可视区域上侧距离（event调用）

clientTop/clientLeft：盒子的border宽高也就是实际获取到的是左边框和上边框，用的少

client家族兼容性问题

谷歌火狐支持的获取页面可视区域的属性：window

window.innerWidth
window.innerHeight

IE8 及其以下：document.documentElement（html）

document.documentElement.clientWidth
document.documentElement.clientHeight

其他浏览器：body

document.body.clientWidth
document.body.clientHeight

兼容性封装：

 function getClientSize(){
		   var width=document.documentElement.clientWidth||window.innerWidth||document.body.clientWidth||0;
		   var height=document.documentElement.clientHeight||window.innerHeight||document.body.clientHeight||0;
			
		return{
			clientWidth:width,
			clientHeight:height
		}
	   
	   }

响应式布局：

一个页面适应多个终端
屏幕宽度 1000以上是pc端
屏幕宽度 1000—600是平板
屏幕宽度 600以下是手机

   window.onresize=function(){
	   //获取屏幕宽高
	   var width=getClientSize().clientWidth;
	   
	   //进行判断
	   if(width>1000){ //pc端 
		   document.body.style.backgroundColor="pink";
	   }else if(width>=600){ //平板
		   document.body.style.backgroundColor="yellow";
	   }else{ //手机
		   document.body.style.backgroundColor="green";
	   }
   }

获取页面可视区域的大小的兼容性

   function getClientSize(){
   		   var width=document.documentElement.clientWidth||window.innerWidth||document.body.clientWidth||0;
   		   var height=document.documentElement.clientHeight||window.innerHeight||document.body.clientHeight||0;
   			
   		return{
   			clientWidth:width,
   			clientHeight:height
   		}
   
   }

头上三尺很有神

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS三大家族之scroll家族和client家族

Scroll家族scroll家族:scrollWidth scrollHeight scrollLeft scrollTopscrollWidth scrollHeight （不包括border）scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。作用：获取元素内容...
复制链接

扫一扫