描述

判断是否元素 el 当前是否 可见在某个滚动元素上。
有个原生方法，IntersectionObserver (opens new window) 兼容性不是太好。，不过这个是相对于整个屏幕可视区域，不能定制划到某个特定滚动元素

1.示例

滚动一下下面区域👇试图

第8个box 部分可见： 否

第8个box 全部可见： 否

第20个box 部分可见： 否

第20个box 全部可见： 否

第1个box

第2个box

第3个box

第4个box

第5个box

第6个box

第7个box

第8个box

第9个box

第10个box

第11个box

第12个box

第13个box

第14个box

第15个box

第16个box

第17个box

第18个box

第19个box

第20个box

第21个box

第22个box

第23个box

第24个box

第25个box

第26个box

第27个box

第28个box

第29个box

第30个box

第31个box

第32个box

第33个box

第34个box

第35个box

第36个box

第37个box

第38个box

第39个box

第40个box

<template>
  <div>
    <el-divider content-position="left">滚动一下下面区域👇试图</el-divider>
    <el-row>
      <el-col :span="12">
        <div>
          第8个box 部分可见：
          <el-tag type="success" effect="dark" v-if="box8Visible">是</el-tag>
          <el-tag type="danger" effect="dark" v-else>否</el-tag>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          第8个box 全部可见： <el-tag type="success" effect="dark" v-if="box8AllVisible">是</el-tag>
          <el-tag type="danger" effect="dark" v-else>否</el-tag>
        </div>
      </el-col>
      <el-col :span="24">
        <div style="height: 12px"></div>
      </el-col>
      <el-col :span="12">
        <div>
          第20个box 部分可见： <el-tag type="success" effect="dark" v-if="box20Visible">是</el-tag>
          <el-tag type="danger" effect="dark" v-else>否</el-tag>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          第20个box 全部可见： <el-tag type="success" effect="dark" v-if="box20AllVisible">是</el-tag>
          <el-tag type="danger" effect="dark" v-else>否</el-tag>
        </div>
      </el-col>
    </el-row>
    <div
      class="isElementVisibleInViewport-view"
      ref="scrollView"
      style="overflow-x: hidden; overflow-y: auto; height: 400px;border: 1px solid chocolate;"
    >
      <div
        :class="[
          `isElementVisibleInViewport-box-${item}`,
          [8, 20].includes(item) && `isElementVisibleInViewport-box-active`
        ]"
        v-for="item in total"
        :key="item"
      >
        第{{ item }}个box
      </div>
    </div>
  </div>
</template>

<script>
import { isElementVisibleInViewport, throttle } from 'sf-utils2'

export default {
  data() {
    return {
      total: 40,
      box8Visible: false,
      box8AllVisible: false,
      box20Visible: false,
      box20AllVisible: false
    }
  },
  mounted() {
    console.log(this)
    this._throttleScroll = throttle(this.onScroll, 20)
    this.$refs.scrollView.addEventListener('scroll', this._throttleScroll, false)
  },
  methods: {
    onScroll() {
      this.box8Visible = isElementVisibleInViewport({
        el: this.$refs.scrollView.querySelector('.isElementVisibleInViewport-box-8'),
        elScrollView: this.$refs.scrollView,
        partiallyVisible: true
      })
      this.box20Visible = isElementVisibleInViewport({
        el: this.$refs.scrollView.querySelector('.isElementVisibleInViewport-box-20'),
        elScrollView: this.$refs.scrollView,
        partiallyVisible: true
      })
      this.box8AllVisible = isElementVisibleInViewport({
        el: this.$refs.scrollView.querySelector('.isElementVisibleInViewport-box-8'),
        elScrollView: this.$refs.scrollView,
        partiallyVisible: false
      })
      this.box20AllVisible = isElementVisibleInViewport({
        el: this.$refs.scrollView.querySelector('.isElementVisibleInViewport-box-20'),
        elScrollView: this.$refs.scrollView,
        partiallyVisible: false
      })
    }
  }
}
</script>
<style>

.isElementVisibleInViewport-view {
  overflow-x: hidden;
  overflow-y: auto;
  height: 400px;
  border: 1px solid chocolate;
  margin: 12px 0;
}
.isElementVisibleInViewport-view > div {
  background: #eee;
  padding: 28px;
  text-align: center;
}
.isElementVisibleInViewport-view > div + div {
  margin-top: 12px;
}
.isElementVisibleInViewport-view > div.isElementVisibleInViewport-box-active {
  background: darkorange;
  color: #fff;
}

</style>

显示代码 复制代码 复制代码

2.入参说明

参数	说明	类型	是否必填	默认值
el	目标元素	HTMLElement	是	-
elScrollView	滚动区域元素，不传默认是 body 滚动元素	HTMLElement	-	-
partiallyVisible	是否部分显示	Boolean	-	true
direction	方向 可选值 horizontal（水平） vertical（垂直）， 默认值 vertical	String	-	-
offsetTop	顶部偏移量	Number	-	vertical
offsetBottom	底部偏移量	Number	-	0
offsetLeft	左部偏移量	Number	-	0
offsetRight	右部偏移量	Number	-	0

3.源码

源码，点开查看 👈

/**
 * 检查指定的元素是否在视口中可见。
 * @param el 目标元素
 * @param elScrollView 滚动区域元素
 * @param partiallyVisible 是否部分显示
 * @param direction 方向 可选值  horizontal（水平）  vertical（垂直）， 默认值 vertical
 * @param offsetTop 顶部偏移量
 * @param offsetBottom 底部偏移量
 * @param offsetLeft 左部偏移量
 * @param offsetRight  右部偏移量
 * @returns {boolean}
 */
function isElementVisibleInViewport({
  el,
  elScrollView,
  partiallyVisible = true,
  direction = 'vertical', // horizontal  vertical
  offsetTop = 0,
  offsetBottom = 0,
  offsetLeft = 0,
  offsetRight = 0
}) {
  if (!elScrollView) {
    elScrollView = document.documentElement || document.body
  }
  const elRect = el.getBoundingClientRect()
  const elScrollViewRect = elScrollView.getBoundingClientRect()
  if (direction === 'vertical') {
    return partiallyVisible
      ? elRect.bottom > elScrollViewRect.top + offsetTop && elRect.top < elScrollViewRect.bottom + offsetBottom
      : elRect.top > elScrollViewRect.top + offsetTop && elRect.bottom < elScrollViewRect.bottom + offsetBottom
  } else if (direction === 'horizontal') {
    return partiallyVisible
      ? elRect.right > elScrollViewRect.left + offsetLeft && elRect.left < elScrollViewRect.right + offsetRight
      : elRect.left > elScrollViewRect.left + offsetLeft && elRect.right < elScrollViewRect.right + offsetRight
  }
}