SOURCE

let s = document.querySelector('.s');
console.log(s.scrollWidth, s.scrollHeight);//283,608
// scroll 返回自身 包括padding + 内容宽度  数值不带单位
// (内容)如果不超过盒子高度则返回原来的
// (内容) 如果超过了,那就返回内容实际高度
console.log(s.clientWidth, s.clientHeight);//283,300

// scrollTop scrollLeft
console.log(s.scrollTop);
// 获取scrollTop需要配合我们scroll事件
s.addEventListener('scroll', function(){
  console.log(s.scrollTop);
  // 被卷去的高度
})

 <div class="s">
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
        <p>123</p>
    </div>

.s{
  width: 300px;
  height: 300px;
  background-color: pink;
  border: 10px solid black;
  /* padding: 10px; */
  white-space: nowrap;
  overflow: auto;
}