scroll系列屬性 · JavaScript

## scroll ![](https://box.kancloud.cn/a8fa3dbd5b29d265f35174dc8c24f41d_534x510.png) ``` body { margin: 0; } #box { width: 100px; height: 100px; margin: 50px; background-color: pink; border: 10px solid yellow; padding: 10px; overflow: auto; } </style> </head> <body> <div id="box"> 2009年6月25日流行歌星邁克爾·杰克遜因心臟病發作在洛杉磯分校醫療中心一家醫院去世。死因是私人醫生康拉德2009年6月25日流行歌星邁克爾·杰克遜因心臟病發作在洛杉磯分校醫療中心一家醫院去世。死因是私人醫生康拉德 </div> <script> var box = document.getElementById('box'); // //box內容的寬度,包括padding,不包括滾動條 // console.log(box.scrollWidth); // //box包括未顯示的內容高度,包括padding,是整個內容的高度 // console.log(box.scrollHeight); // //元素的大小+padding,不包括滾動條 // console.log(box.clientWidth); // console.log(box.clientHeight); //滾動條事件 box.onscroll = function () { //注意,獲取的數值是內容滾動出去的距離 // console.log(box.scrollLeft); // console.log(box.scrollTop); } </script> ``` ![](https://box.kancloud.cn/11b81c11785a453c4351b7215de4fbab_875x510.png)