<! DOCTYPE HTML> <HTML lang = "EN"> <head> <Meta charset = "UTF-. 8"> <title> the Document </ title> <style> body { margin: 0 ; } #box { width: 100px ; height: 100px; margin: 50px; border: 30px Solid Red; padding: 10px; background - Color: Green; overflow: Auto; } </ style> </ head> <body> <div ID = "Box"> Bob to the zoo with Xiaohua, when the door, Xiao-Ming Xiaohua said, pointing to the doorman: "!! Oh look Wait a minute out, not to mention I stole your monkey." </ div> <script>// scrollvar = document.getElementById box ( 'box' ); // if the scrollbar box triggered when box.onscroll = function () { the console.log (box.scrollLeft); the console.log (box.scrollTop); } // // Box rolling out from // the console.log (box.scrollLeft); // the console.log (box.scrollTop); // size // content, including content and padding, not shown, does not include scrollbar // the console.log (box.scrollWidth); // the console.log (box.scrollHeight); // // size of elements does not include a scroll bar + padding // the console.log (box.clientWidth); // the console.log (box.clientHeight); </ Script> </ body> </ HTML>