SOURCE

var div = document.querySelector('#outer')
var doc = document.documentElement;
setScroll();
function setScroll() {
  const container = document.querySelector('#outer #scroll');
  container.innerHTML = `
  滚动条
  <br>
  scrollLeft: ${doc.scrollLeft}
  <br>
  scrollTop: ${doc.scrollTop}
  <br>
  scrollWidth: ${doc.scrollWidth}
  <br>
  scrollHeight: ${doc.scrollHeight}
`;
}


document.querySelector('#outer #offset').innerHTML = `
  offset
  <br>
  offsetLeft: ${doc.offsetLeft} 
  <br>
  offsetTop: ${doc.offsetTop}
  <br>
  offsetWidth: ${doc.offsetWidth}
  <br>
  offsetHeight: ${doc.offsetHeight}
  <br>
  offsetParent: ${doc.offsetParent}
`;
document.querySelector('#outer #client').innerHTML = `
  视口大小
 <br>
  clientLeft: ${doc.clientLeft}
  <br>
  clientTop: ${doc.clientTop}
  <br>
  clientWidth: ${doc.clientWidth}
  <br>
  clientHeight: ${doc.clientHeight}
`;

var div2 = document.querySelector('#outer2')
setScroll2();
function setScroll2() {
  const container = document.querySelector('#outer2 #scroll');
  container.innerHTML = `
  滚动条
  <br>
  scrollLeft: ${div2.scrollLeft}
  <br>
  scrollTop: ${div2.scrollTop}
  <br>
  scrollWidth: ${div2.scrollWidth}
  <br>
  scrollHeight: ${div2.scrollHeight}
`;
}


document.querySelector('#outer2 #offset').innerHTML = `
  offset
  <br>
  offsetLeft: ${div2.offsetLeft} 
  <br>
  offsetTop: ${div2.offsetTop}
  <br>
  offsetWidth: ${div2.offsetWidth}
  <br>
  offsetHeight: ${div2.offsetHeight}
  <br>
  offsetParent: ${div2.offsetParent.tagName}
`;
document.querySelector('#outer2 #client').innerHTML = `
  视口大小
 <br>
  clientLeft: ${div2.clientLeft}
  <br>
  clientTop: ${div2.clientTop}
  <br>
  clientWidth: ${div2.clientWidth}
  <br>
  clientHeight: ${div2.clientHeight}
`;

<code>document.documentElement</code>
<div id="outer" onscroll="setScroll()">
  <p id="offset"></p>
  <p id="client"></p>
  <p id="scroll"></p>
  <p id="viewport"></p>
</div>
<code>div</code>
<div id="outer2" onscroll="setScroll2()">
  <p id="offset"></p>
  <p id="client"></p>
  <p id="scroll"></p>
  <p id="viewport"></p>
</div>

div {
  box-sizing: border-box;
  display: flex;
  width: 600px;
  height: 200px;
  margin: 5px;
  padding: 6px;
  border: 7px solid red;;
  overflow: auto;
}
p {
  flex-shrink: 0;
  display: inline-block;
  width: 180px;
  height: 400px;
  border: 1px solid blue;
  vertical-align: top;
  white-space: nowrap;
}