Scroll series

scroll And client The difference between

scrollWidth/scrollHeight Wide height Contains padding value It doesn't contain marging and border value

client The elements are Defined width and height
scroll The actual width and height of the element itself does not contain borders Return value without unit

html Code

 <div>1.JavaScript Definition and use of basic slave variables 、 Flow control statement 、 Array 、 function 、 Constructors 、 Built in objects and objects, etc  2.web API  Explain how to get DOM Elements , How to operate DOM  Elements ,BOM operation   Mobile terminal makes web page special effects  3.  There will be js senior ,ES6 Class object-oriented syntax , Object oriented case , Prototype and prototype chain, etc . 4.  There will be jquery  comprehensive  + echarts Data visualization </div>

css style

div{
    width:200px;height:200px;border:solid 5px #f06;overflow:scroll;padding:20px;}

js Code testing

var div = document.querySelector('div')
        console.log(div.scrollWidth); //240
        console.log(div.scrollHeight); //380
        console.log(div.clientWidth); //240
        console.log(div.clientHeight); //240
    

scroll Scroll event when our scroll bar changes Events that trigger

div.addEventListener('scroll', function() {
    
// The height of the upper roll 
  console.log(div.scrollTop); //87
// Height of side roll 
  console.log(div.scrollLeft);//0
 })