检查元素当前是否在完美滚动条中可见

时间:2021-06-15 09:36:32

标签: javascript vue.js scrollbar perfect-scrollbar

我的应用程序有一个弹出窗口,里面有一个 div,里面有一个自定义滚动条 (perfect-scrollbar-1.5.0.)。可滚动字段内是项目列表。如何检查某个特定项目当前是否可见?

我尝试了这段代码,其中 this.$refs.chatbox - 是一个可滚动的框

    isElementInView (el, partial = true) {
      if (!el) { return }
      const cTop = this.$refs.chatbox.scrollTop
      const cBottom = cTop + this.$refs.chatbox.clientHeight
      const eTop = el.offsetTop
      const eBottom = eTop + el.clientHeight
      const isTotal = (eTop >= cTop && eBottom <= cBottom)
      const isPartial = partial && (
        (eTop < cTop && eBottom > cTop) ||
        (eBottom > cBottom && eTop < cBottom)
      )
      return (isTotal || isPartial)
    },
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>

0 个答案:

没有答案