网站建设的市场需求,关键词在线挖掘网站,seo技术教程,山东省建设工程招标投标管理信息网官网scroll 翻译过来就是滚动的意思#xff0c;我们使用 scroll 的相关属性可以得到元素大小与滚动距离等等 scroll 的相关属性#xff1a; element.scrollTop#xff1a;返回滚动后被卷上去的距离#xff0c;返回值无单位 element.scrollLeft#xff1a;返回滚动后被卷到左边…scroll 翻译过来就是滚动的意思我们使用 scroll 的相关属性可以得到元素大小与滚动距离等等 scroll 的相关属性 element.scrollTop返回滚动后被卷上去的距离返回值无单位 element.scrollLeft返回滚动后被卷到左边的距离返回值无单位 element.scrollWidth返回自身的实际宽度包含padding不包含边框 element.scrollHeight返回自身的实际高度包含padding不包含边框 我们在此主要研究 element.scrollTop 与 element.scrollHeight其他两个同理
一 element.scrollHeight
返回自身的实际高度包含padding不包含边框返回值无单位主要针对的是内容超过了盒子大小溢出的情况返回的值包括了溢出的高度
例如以下情况 我们此时使用此方法返回的不再是盒子大小 200而是包括了溢出部分的高度
stylediv{width: 200px;height: 200px;border: 10px solid red;background-color: rgb(255, 215, 105);}/style
/head
bodydiv我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友/divscriptvar divdocument.querySelector(div);console.log(div.scrollHeight);/script
/body 二element.scrollTop
返回滚动后被卷上去的距离返回值无单位此处说的滚动上去是我们针对溢出的情况往往会在样式里加上 overflowauto这是给盒子加上了滚动条就可以拖动滚动条查看溢出的部分所以此时返回的值是 拖动滚动条后内容是相对往上移动的返回值就是向上移动的那部分的高度
但在此处我们还需要补充一个事件scroll事件即拖动滚动条就会触发
stylediv{width: 200px;height: 200px;border: 10px solid red;background-color: rgb(255, 215, 105);overflow: auto; //滚动条}/style
/head
bodydiv我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友/divscriptvar divdocument.querySelector(div);div.addEventListener(scroll,function(){ //拖动滚条就会触发事件console.log(div.scrollTop);})/script
/body
可以看到拖动滚动条的过程中事件被触发其输出 element.scrollTop 的值一直在变化这个值就是 被拖动到盒子上方的高度 还要注意这个是元素中被卷上去的高度如果是要得到页面被卷上去的高度则应写成 window.pageYOffset
