<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>57-JavaScript-scroll属性</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; padding: 50px; border: 50px solid #000; background: red; background-clip: content-box; color: deepskyblue; overflow: auto; } </style> </head> <body> <div id="box"> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> 我是内容<br/> </div> <script> /*
1.内容没有超出元素范围时
scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth
scrollHeight: = 元素高度 + 内边距的高度 == clientHeight
*/ let oDiv = document.querySelector("div"); console.log(oDiv.scrollWidth);//content的宽度加上文字的宽度 console.log(oDiv.scrollHeight);//content的高度加上文字的高度 /*
2.内容超出元素范围时
scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度
*/ /*
3.scrollTop / scrollLeft
scrollTop: 超出元素内边距顶部的距离
scrollLeft: 超出元素内边距左边的距离
*/ // console.log(oDiv.scrollTop); oDiv.onscroll = function () {//超出的部分的高度. console.log(oDiv.scrollTop); } </script> </body> </html>
scroll
关注
打赏
