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)