css之滚动的问题，在做项目的时候，一直对scroll属性有些疑问，特意记录一下，代码如下:

mounted() {
    if (process.client){
      window.addEventListener('scroll', this.handleScroll, true)
    }
  },

methods: {
...
...
    handleScroll: function (){
      console.log('window的滚动距离:', window.scrollY) // 滚动条到顶部的距离

      // HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
      // HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。
      console.log('元素 articleWrapper offsetTop:', this.$refs.articleWrapper.offsetTop)

      console.log('元素 articleWrapper scrollHeight:',this.$refs.articleWrapper.scrollHeight) // 整个内容的高度(包括了 滚动框之外的内容)
      console.log('元素 articleWrapper clientHeight:', this.$refs.articleWrapper.clientHeight) // 客户端看到的高度(就会说滚动框里的内容)
      console.log('元素 articleWrapper scrollTop:',this.$refs.articleWrapper.scrollTop) // 滚动条到顶部的距离
    },
    toTop: function (){
      this.$refs.articleWrapper.scrollTo({top:0, behavior: "smooth"}) // 常见用法，点击 回到顶部
    },
...
...
}