vue3 获取table 距离顶部距离

<template>
  <div ref="tableRef"></div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll() {
      console.log('滚动高度', window.pageYOffset)
      console.log('距离顶部高度', this.$refs.tableRef.getBoundingClientRect().top)
    }
  }
}
</script>

相关问题

vue中获取元素到顶部距离

在 Vue 中，可以使用 `$refs` 属性来获取元素，并使用 `getBoundingClientRect()` 方法来获取元素到顶部的距离。具体做法如下：

1. 在需要获取到顶部距离的元素上添加 `ref` 属性，例如：

<div ref="myElement">我是需要获取到顶部距离的元素</div>

2. 在 Vue 实例中访问 `$refs` 属性来获取该元素，并获取其到顶部的距离，例如：

mounted() {
  const myElement = this.$refs.myElement
  const topDistance = myElement.getBoundingClientRect().top
  console.log(topDistance)
}

这样就可以获取到该元素到顶部的距离了。需要注意的是，`getBoundingClientRect()` 方法获取的是相对于视口（即浏览器窗口）的距离，如果需要获取相对于文档的距离，还需要加上滚动条的距离。

vue3使用锚点距离顶部100px

在 Vue3 中，如果你想创建一个元素，并让它总是位于页面顶部，距离浏览器窗口顶部100像素，你可以通过JavaScript操作DOM或者使用Vue的生命周期钩子结合CSS来实现。这里是一个简单的示例：

首先，在HTML模板中添加一个`<div>`并设置它的`id`，例如：

<div id="top-anchor" ref="anchor"></div>

然后，在对应的Vue组件中，你可以这样做：

export default {
  setup() {
    const $anchor = ref(null); // 使用ref来存储DOM节点

    onMounted(() => {
      $anchor.value = document.getElementById('top-anchor');
      if ($anchor.value) {
        const initialTop = $anchor.value.getBoundingClientRect().top + window.scrollY; // 获取元素初始位置
        $anchor.value.style.position = 'fixed'; // 设置固定定位
        $anchor.value.style.top = `${initialTop - 100}px`; // 距离顶部100px
      }
    });

    return { $anchor };
  },
}

在这个例子中，`onMounted`钩子会在组件挂载完成后运行，获取到元素的位置并将它固定在顶部，并调整其上边距使其始终距离顶部100px。