vuejs on scroll 修复侧边栏，

Posted 2023-02-22

【中文标题】vuejs on scroll 修复侧边栏，

【英文标题】：vuejs on scroll fix the side bar,

【发布时间】：2019-04-30 02:06:25

【问题描述】：

 <div class="col-sm-4 my-orders-order-now">
    <div :class=" fixed: fixedOrderPanel ">
      <FixedPannel />
    </div>
    
  </div>



data () 
  return 
    orders: [],
    loading: false,
    fixedOrderPanel: false
 
,

mounted () 
   this.getJokes()
   if (window !== undefined && window.addEventListener) 
    window.addEventListener('scroll',() => this.handleScroll(window.scrollY));
  

,

 destroyed: function ()  //Not working

 console.log('Afore')
    if (window !== undefined && window.removeEventListener) 
         window.removeEventListener('scroll', 
              ()=>this.handleScroll(window.scrollY));

    
,

 methods: 
   handleScroll: function(scrolled)
   console.log('scrolling')
    if (scrolled > 160) 
        this.fixedOrderPanel = true
     else 
        this.fixedOrderPanel = false
    

,

window.removeEventListener 的滚动监听器在销毁/组件或路由更改 vuejs 后仍然完好无损。 window.removeEventListener 在更改路由或组件时不起作用，即使我尝试了 beforeDestroy() 和销毁的方法来删除滚动事件侦听器。

【问题讨论】：

javascript removeEventListener not working的可能重复

这与您上次发布此内容时 linked to 的规范中列出的方法相同

我正在为侧边栏问题提供解决方案，没有匿名功能问题，删除重复

【参考方案1】：

<div class="col-sm-4 my-orders-order-now">
   <div :class=" fixed: fixedOrderPanel ">
     <FixedPannel />
   </div>

</div>  


components: 
    FixedPannel
, 

mounted () 
    this.getJokes()
    document.addEventListener('scroll',  this.handleScroll);
  ,

 destroyed: function () 
    document.removeEventListener('scroll', this.handleScroll);

 ,

 methods: 

    handleScroll: function()
        const checkWindow = window !== undefined && window.scrollY;

        if (checkWindow && window.scrollY > 160) 
           this.fixedOrderPanel = true
         else 
           this.fixedOrderPanel = false
       

     const scrollFix = (scrolled) => 
        if (scrolled > 160) 

           this.fixedOrderPanel = true
          else 
           this.fixedOrderPanel = false
        
    

    


<style>
.fixed
  position: fixed;
  top: 0px;
  padding: 1%;
 

</style>