js对视图距离的详解及各种案列

获取样式

var a = document.querySelector('.parent');
// 获取son 父节点.querySelector('需要选择的子节点');
var b = a.querySelector('.son');

各种视距的获取

console.log('content+padding:',myp.clientHeight);
console.log('content+border+padding:',myp.offsetHeight);
console.log('content+滚动距离+padding:',myp.scrollHeight);
console.log('clientWidth:内容+padding-工具条',myp.clientWidth)
console.log('offsetWidth:内容+padding+边框',myp.offsetWidth)
console.log('scrollWidth:内容+padding-工具条+滚动距离',myp.scrollWidth)

document文档.default默认View视图.get获取Computed计算Style样式(myp,null).height

 图片于尺寸适应方式 css3方法

 object-fit: cover 保持原有尺寸比例。但部分内容可能被剪切
                contain 保留原有元素内容的长度和宽度，也就是说内容不会被重置
                scale-down 保持原有尺寸比例
                initial 设置为默认值
                inherit 从该元素的父元素继承属性
                

实例 图片懒加载

图片懒加载 默认图src为loading.gif
当图片进入浏览器可视区域，开始把src替换为data-src执行懒加载
进入可视区域 元素与浏览器可视区域的边界小于浏览器可视区域高+浏览器滚动距离

// 监听浏览器的滚动
window.onscroll = lazy;
//预先加载一次 先运行一次函数
lazy();

function lazy(){
	var imgs = document.querySelectorAll('img[data-src]');
	//遍历图片
	imgs.forEach(item=>{
		// 获取item于视口的垂直距离
		var y = item.getBoundingClientRect().y;
		console.log(y);
		// 如果y值小于窗口的高 把src变成data-src
	if(y<window.innerHeight){
		item.src = item.getAttribute('data-src');
		// 移除data-src的值
		item.removeAttribute('data-src');
		}
	})
}

元素与父元素之间的距离

// 默认当前元素与body的距离
// 如果父辈有position非static元素，则是与该父辈元素的距离


//与相对父元素的垂直偏移距离
console.log('offsetTop',b.offsetTop);

//与相对父元素的左偏移距离
console.log('offsetLeft',b.offsetLeft);

/相对父元素 元素的父辈元素有position且非static的值
console.log('offsetParent',b.offsetParent);

// get获取 Bounding边界 Client客户端 Rect区域

// 获取元素s的边界(bottom,top,left,right,)
var top = s.getBoundingClientRect().top;

实例 导航栏的吸顶和回顶

吸顶的思路

1       给window添加滚动事件,如果滚动的高度大于header高度,让.nav position属性改变fixed 否则改变static
2      添加窗口滚动事件监听高度

        if滚动距离大于header的高 让body 类名添加fix else让body类名移除fix

回顶的思路

1      获取的回到顶部元素

2      获取滚动距离

3      如果滚动距离大于你想让显示的距离，display = none

4      添加点击事件，点击后让监听到的高度变为0

<script>
	// 吸顶效果
	var nav = document.querySelector(".nav");//获取nav
	var header = document.querySelector(".header");//获取到header节点
    // 给window添加滚动事件,如果滚动的高度大于header高度,
        让.nav position属性改变fixed 否则改变static
	// 添加窗口滚动事件
	window.addEventListener("scroll",function(){
	// 如果滚动距离大于header的高
		if(document.documentElement.scrollTop>header.offsetHeight){
		// 让body 类名添加fix
			document.body.classList.add("fix")
		}else{
		    //让body类名移除fix
			document.body.classList.remove("fix")
			}
		})
			
			
		// 获取的回到顶部元素
		var topel = document.querySelector(".top");
		// 目标监听浏览器滚动事件,当滚动距离超过200像素,显示top
		window.onscroll = function(){
			// 获取滚动距离
			var top = document.documentElement.scrollTop;
				if(top>200){  //如果滚动距离大于200
					topel.style.display = "block"; //显示回到顶部
				}else{
					topel.style.display = "none";
				}
			}
		// 点击topel 回到顶部
		topel.onclick = function(){
			// 1秒 setInterval执行33次 t等于每次滚动的距离=需要滚动的总距离/33
			var t = document.documentElement.scrollTop/20;
			// document.documentElement.scrollTop =0;
			var id = setInterval(function(){
				// 每隔30毫秒让scrollTop -12
				// 当scrollTop<=0使用停止间隔调用
				document.documentElement.scrollTop-=t;
				if(document.documentElement.scrollTop<=0){
					clearInterval(id);
				}
			},30)
		}