js 检测元素是否在页面中_检测何时元素在页面上变得可见或隐藏

js 检测元素是否在页面中

观察观察 (vue-observe-visibility)

Vue 2.x directive using Intersection Observer API that detects if the element is visible (in the viewport and not hidden by CSS).

使用Intersection Observer API的Vue 2.x指令检测该元素是否可见(在视口中并且未被CSS隐藏)。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm install --save vue-observe-visibility

This also works on components:

```html
<MyComponent v-observe-visibility="visibilityChanged" />

The function will be called whenever the visiblity of the element changes with the argument being a boolean (true means the element is visible on the page, false means that it is not).

每当元素的可见性发生变化且参数为布尔值时，就会调用该函数( true表示元素在页面上可见， false表示不可见)。

The second argument is the corresponding IntersectionObserverEntry object.

第二个参数是对应的IntersectionObserverEntry对象。

visibilityChanged (isVisible, entry) {
  this.isVisible = isVisible
  console.log(entry)
}

传递自定义参数 (Passing custom arguments)

You can add custom argument by using an intermediate function:

您可以使用中间函数来添加自定义参数：

<div v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, customArgument)">

Here visibilityChanged will be call with a third custom argument customArgument.

这里visibilityChanged将与第三个自定义的参数调用customArgument 。

例 (Example)

<div id="app">
  <button @click="show = !show">Toggle</button>
  <label>
    <input type="checkbox" v-model="isVisible" disabled/> Is visible?
  </label>
  <div ref="test" v-show="show" v-observe-visibility="visibilityChanged">Hello world!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    show: true,
    isVisible: true,
  },
  methods: {
    visibilityChanged (isVisible, entry) {
      this.isVisible = isVisible
      console.log(entry)
    },
  },
})
</script>

翻译自: https://vuejsexamples.com/detect-when-an-element-is-becoming-visible-or-hidden-on-the-page/

js 检测元素是否在页面中