vue listen scroll event, show hidden div in the specified location

1. Scroll event listener

to add a method in the method

     btn_pos: function () {
       // scrollbar height 
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 
      the console.log (scrollTop)           
      // height of the scroll bar height> visible area 
    }

Then, in the mounted hooks, the window to add a scroll event listener

window.addEventListener('scroll',this.btn_pos); 

2. according to their needs and improve the code

btn_pos: function () {
       // scrollbar height 
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
       var the clientHeight = document.documentElement.clientHeight;        
      the console.log (the clientHeight) 
      // height scrollbar> highly visible area 
      IF (scrollTop> the clientHeight) {
         the this .local =! the this .local 
      } the else {  
         the this .local =! the this .local                         
      } 
    }

3.

<button v-if="local" class="btn_run">返回</button>

4.

 data () {
    return {
      local:false
    }
  },

Note: If you leave the page, it is necessary to remove the event monitor, or will be error

Destroyed () { // After leaving this screen, delete, or else there will be problems 
    window.removeEventListener ( 'the Scroll', the this .btn_pos) 
  }

Reproduced in https://blog.csdn.net/weixin_42521965/article/details/80827482