技術標籤：vueelement

問題，自己再專案中有回到頂部底部元件，在模態框中缺無法使用，怎麼監聽dom滾動條都無濟於事；

首先都是在掛載函式裡面添加了監聽

 mounted() {
      // window.addEventListener("scroll", this.handleScroll,true); // 監聽（繫結）滾輪滾動事件
   
    },

但是這樣只能監聽到body的滾動，當模態框彈出，我仔細檢查發現，element 把body的滾動條直接隱藏，而是模態框裡面的滾動條，所以在這個裡面監聽不到任何資料，發現問題所在了，那麼解決就簡單了；

1.我是使用@scroll="handleScroll"

    handleScroll(e) {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          this.scrollTop = e.srcElement.scrollTop
         //  console.log(this.scrollTop) // 獲取你操作的滾動條高度
          this.visible =e.srcElement.scrollHeight > 500
      
    },
 

2.在對應模態框裡面加入ref屬性，然後回到頂部底部方法就直接設定滾動條位置即可

   //底部
      backToBottom() {
      //console.log(this.$refs.scollElement);
      if (this.isMoving) return
      const start = this.$refs.scollElement.$el.scrollTop 
      let end = this.$refs.scollElement.$el.scrollHeight
      this.$refs.scollElement.$el.scrollTo(start , end)
  
    },
 

//頂部
     backToTop() {
       // scollElement
      this.$refs.scollElement.$el.scrollTo(0, 0)
    },