scrollTop、scrollLeft、scrollWidth、scrollHeight

• scrollTop、scrollLeft的试用范围、用法详解
  1、这2个属性，只能用于设置了overflow的css样式中，否则这2个属性没有任何意义，
  并且overflow的值不能为visible，但是可以为hidden、quto、scroll，但是hidden属性最常见。

  2、在对这2个属性设置值时，直接用数字即可，否则不生效。

• javaScript中scrollLeft、scrollTop属性的参数意义
  scrollLeft：是该元素的显示(可见)内容，与该元素实际的内容的距离
  即：scrollLeft就如同你拖动水平滚动条一样，假如你的页面太宽了，浏览器的宽度不够，就会出现滚动条
  一开始scrollLeft等于0，你就看到了你的页面最左边的内容，而不显示超出浏览器的那部分，
  当你向右拖动滚动条时，scrollLeft值就变大了，你就看到了右边隐藏的内容，而看不到左边隐藏的部分，
  浏览器就会从scrollLeft的位置开始显示，而不显示0~scrollLeft的元素内容。

  简单来说，就是，元素从scrollLeft的位置，显示该元素的内容。
  俗话说：元素最左边为0，显示的宽度为10，那就能看到0~10的内容，
  加入scrollLeft为20的话，你看到的就是从20的位置开始，向后显示10个。

  scrollTop和scrollLeft一样，只不过变成了垂直而已。

* scrollWidth：返回自身的width + padding，返回数值不带单位
  scrollHeight：返回自身的height + padding，返回数值不带单位 

  <div class="father">
    <ul class="ulClass">
      <li>哈哈哈哈哈哈1</li>
      <li>哈哈哈哈哈哈2</li>
      <li>哈哈哈哈哈哈3</li>
      <li>哈哈哈哈哈哈4</li>
      <li>哈哈哈哈哈哈5</li>
      <li>哈哈哈哈哈哈6</li>
      <li>哈哈哈哈哈哈7</li>
      <li>哈哈哈哈哈哈8</li>
      <li>哈哈哈哈哈哈9</li>
      <li>哈哈哈哈哈哈10</li>
      <li>哈哈哈哈哈哈11</li>
      <li>哈哈哈哈哈哈12</li>
      <li>哈哈哈哈哈哈13</li>
      <li>哈哈哈哈哈哈14</li>
      <li>哈哈哈哈哈哈15</li>
      <li>哈哈哈哈哈哈16</li>
      <li>哈哈哈哈哈哈17</li>
      <li>哈哈哈哈哈哈18</li>
      <li>哈哈哈哈哈哈19</li>
      <li>哈哈哈哈哈哈20</li>
      <li>哈哈哈哈哈哈21</li>
      <li>哈哈哈哈哈哈22</li>
      <li>哈哈哈哈哈哈23</li>
      <li>哈哈哈哈哈哈24</li>
      <li>哈哈哈哈哈哈25</li>
      <li>哈哈哈哈哈哈26</li>
      <li>哈哈哈哈哈哈27</li>
      <li>哈哈哈哈哈哈28</li>
      <li>哈哈哈哈哈哈29</li>
      <li>哈哈哈哈哈哈30</li>
      <li>哈哈哈哈哈哈31</11>
    </ul>
  </div>


<script>
  let father = document.querySelector('.father')
  let ulClass = document.querySelector('.ulClass')
  function throttle(fn, delay) {
    let flag = true
    return function () {
      if (flag) {
        setTimeout(() => {
          fn.apply(this)
          flag = true
        }, delay)
      }
      flag = false
    }
  }
  
  function scrollFlag(){
    console.log('ulClass.scrollTop=', father.scrollTop)
  }
  
  father.addEventListener('scroll', throttle(scrollFlag, 1000))

</script>



  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 200px;
      height: 200px;
      text-align: center;
      background-color: pink;
      overflow-y: auto;
    }

    ul li {
      list-style: none;
    }
  </style>