scroll 系列
element.scrollTop: 返回被卷去的上册距离,返回数值不带单位
element.scrollLeft: 返回被卷去的左侧距离, 返回数值不带单位
element.scrollHeight: 返回自身实际的高度, 不含边框, 返回数值不带单位
element.scrollWidth: 返回自身实际的宽度, 不含边框, 返回数值不带单位
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>scroll系列</title> <style> div{ width: 100px; height: 100px; background-color: lightblue; border: 10px solid red; padding: 10px; overflow: auto; } </style> </head> <body> <div> 我是内容 内容很多 内容很多 内容很多 内容很多 内容很多 内容很多 内容很多 内容很多 内容很多 内容很多 内容很多 内容很多 内容很多 </div> <script> // scroll 系列 var div = document.querySelector('div') console.log(div.scrollHeight); console.log(div.clientHeight); // scroll滚动事件 当我们滚动条发生变化会触发的事件 div.addEventListener('scroll', function(){ console.log(div.scrollTop); }) </script> </body> </html>
仿淘宝固定右侧侧边栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>固定侧边栏</title> <style> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: pink; } .w { width: 1200px; margin: 10px auto; } .header { height: 150px; background-color: purple; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } </style> </head> <body> <div class="slider-bar"> <span class="goBack">返回顶部</span> </div> <div class="header w">头部区域</div> <div class="banner w">banner区域</div> <div class="main w">主体部分</div> <script> //1.获取元素 var sliderbar = document.querySelector('.slider-bar') var banner = document.querySelector('.banner') console.log(banner.offsetTop); // banner.offsetTop 就是被卷去头部的大小 var bannerTop = banner.offsetTop // 当我们侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop - bannerTop //获取main 主体元素 var main = document.querySelector('.main') var goBack = document.querySelector('.goBack') var mainTop = main.offsetTop //2.页面滚动事件 scroll document.addEventListener('scroll', function(){ // window.pageYOffset页面被卷去的头部 // console.log(window.pageYOffset); //3.我们页面被卷去的头部大于等于 172 此时侧边定位改为固定定位 if(window.pageYOffset >= bannerTop ){ sliderbar.style.position = 'fixed' sliderbar.style.top = sliderbarTop + 'px' }else{ sliderbar.style.position = 'absolute' sliderbar.style.top = '300px' } //4.当页面滚动到main盒子 就显示 goBack模块 if(window.pageYOffset >= mainTop ){ goBack.style.display = 'block' }else{ goBack.style.display = 'none' } }) </script> </body> </html>
三大系列总结
element.offsetWidth 返回自身包括padding 边框 内容区的宽度 返回数值不带单位
element.clientWidth 返回自身包括padding 内容区的宽度 不含边框 返回数值不带单位
element.scrollWidth 返回自身实际的宽度 不含边框 返回数值不带单位
offset系列 常用于获取元素位置 offsetLeft offsetTop
client系列 常用于获取元素大小 clientWidth clientHeight
scroll系列 常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过window.pageXOffset 获得
不积跬步无以至千里 不积小流无以成江海
