当元素/div在屏幕上不可见时更改css

Posted 2023-02-22

【中文标题】当元素/div在屏幕上不可见时更改css

【英文标题】：Change css when element/div not visible on screen

【发布时间】：2017-05-05 09:09:58

【问题描述】：

在我的 vue web 应用程序中，当元素之一通过滚动离开屏幕时，我试图更改标题的 CSS 类。

我正在使用jquery-visible 来查找元素是否可见，因为我找不到任何 vue 方法。

现在我在 html 中有以下代码来动态更改 CSS 类：

<div class="aClass" :class="'bClass': isElemVisible()">
   ....
   ....
</div>

在我的 Vue 代码中，我添加了如下方法：

export default 
  name: 'myElem',
  methods: 
    isElemVisible () 
      console.log($('#myDiv').visible(true))
      return $('#myDiv').visible(true)
    
  

这样做的问题是它不会动态更改isElemVisible 返回的值，它只是在加载时采用第一个值，即使在滚动和#myDiv 离开屏幕后也不会更改，如何做到这一点或如果有更好的/vue 方式来做到这一点。

【参考方案1】：

我建议你听一下滚动事件，像这样：https://github.com/vuejs/Discussion/issues/324

【讨论】：

是的，函数通过这个滚动调用，但这并没有动态添加类。

【参考方案2】：

问题是isElemVisible() 没有被执行。该方法已被定义，它在 Vue 第一次确定是否应启用 bClass 时执行，但随后，特别是在滚动时，它永远不会再次执行。

我建议使用布尔型 data 属性，而不是只执行一次的简单方法，您可以在滚动时使用 jquery-visible 返回的值更新该属性。

我整理了this CodePen 来说明我的意思，但简而言之：

<div id="myDiv" class="aClass" :class="'bClass': isElemVisible">
</div>

使用data 属性和滚动事件监听器代替方法：

data() 
  return 
    isElemVisible: true
  
,

created() 
  window.addEventListener('scroll', event => 
    this.isElemVisible = $('#myDiv').visible(true)
  )