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

【问题标题】：Change css when element/div not visible on screen当元素/div在屏幕上不可见时更改css
【发布时间】：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 方式来做到这一点。

【问题讨论】：

标签： javascript jquery html css vue.js

【解决方案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)
  })
}

【讨论】：