缓动动画

缓动动画：非匀速的改变元素css样式的动画效果公式：设定值=当前+(目标值-当前)*百分比

<style>
			.dropbtn {
				width: 200px;
				height: 40px;
				background-color: firebrick;
				border-radius: 5px;
				line-height: 40px;
				padding-left: 20px;
				cursor: pointer;
			}

			.dropmenu {
				width: 300px;
				height: 0px;
				background-color: cyan;
				border-radius: 5px;
				padding-left: 20px;
				overflow: hidden;
			}
		</style>
		<div class="dropbtn">
			btn
		</div>
		<div class="dropmenu">
			<div class="box">hello</div>
			<div class="box">hello</div>
			<div class="box">hello</div>
			<div class="box">hello</div>
			<div class="box">hello</div>
		</div>

		<script>
			// 设定值=当前+(差量)*百分比   差量就是目标值减去当前值
			//在页面渲染完后加载
			window.onload=function(){
				var dropbtn=document.querySelector(".dropbtn")
				var flag=true;
				var timer=null;
				var dropmenu=document.querySelector(".dropmenu")
				var result;
				dropbtn.addEventListener("click",function(e){
					//万一多次点击按钮 先清除上一次的计时器
					clearInterval(timer)
                                        // flag = !flag
					if(flag=!flag //flag){
						result=0
					}else{
						result=400						
					}
					timer=setInterval(()=>{						
						let h=window.getComputedStyle(dropmenu).height
						dropmenu.style.height=parseInt(h)+(result-parseInt(h))*0.7+"px"
					},20)										
				})				
			}
		</script>

窗口相关数据和操作

让窗口滚动到指定距离（滚到指定坐标,前提是页面够长要能）

window.scrollTo(0,600)

window.scroll(0,600)

scrollBy(0,50)

注：

前两个方法功能类似，用法都是将x,y坐标传入，实现滚动到指定位置。

而scrollBy()会在之前的数据基础上做累加。

<style>
    .f1 {
        height: 1000px;
        background-color: rebeccapurple;
    }

    .f2 {
        height: 1000px;
        background-color: skyblue;
    }
</style>

<body>
    <div class="f1">

    </div>
    <div class="f2">

    </div>
    <script>
        window.scrollTo(0, 900)
        window.scroll(0, 700)
        scrollBy(0, 300)
    </script>

window.scrollTo(0, 900)

window.scroll(0, 700)

window.scroll(0, 700) scrollBy(0, 300)

、

el.scrollIntoView(true)：默认为true，将元素和视口的上边缘对齐; 如果传递参数false，则将元素的下边缘和视口的下边缘对齐；

<style>
    .f1 {
        height: 1000px;
        background-color: rebeccapurple;
    }

    .f2 {
        height: 1000px;
        background-color: skyblue;
    }
</style>

<body>
    <div class="f1">

    </div>
    <div class="f2">

    </div>
    <script>
        // window.scrollTo(0, 900)
        // window.scroll(0, 700)
        // scrollBy(0, 300)
        var box2 = document.querySelector(".f2")
        box2.scrollIntoView(false)
    </script>

页面滚动的距离

页面滚动距离

window.pageXOffset/window.pageYOffset //bom操作，IE8及IE8以下不兼容 document.body.scrollLeft/scrollTop document.documentElement.scrollLeft/scrollTop

兼容做法:

let sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop

元素的可视区域尺寸

查看视口的尺寸(会受窗口缩放影响)

window.innerWidth/window.innerHeight// bom操作，IE8及IE8以下不兼容

document.documentElement.clientWidth/clientHeight//标准模式下(，渲染模式)，任意浏览器都兼容

document.body.clientWidth/clientHeight//适用于怪异/混杂模式下的浏览器

document.compatMode//可区分标准模式与否。(BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启)