监听盒子滚动条位置（原生、Vue2、Vue3）

一、原生

要获取盒子（元素）的滚动条位置，可以使用JavaScript的scrollTop和scrollLeft属性。这些属性用于获取或设置元素的垂直和水平滚动条位置。

下面是获取盒子滚动条位置的示例：

// 获取盒子元素
var box = document.getElementById('myBox');

// 获取垂直滚动条位置
var scrollTop = box.scrollTop;

// 获取水平滚动条位置
var scrollLeft = box.scrollLeft;

console.log("垂直滚动条位置: " + scrollTop);
console.log("水平滚动条位置: " + scrollLeft);

在上面的示例中，我们首先通过getElementById方法获取了一个ID为myBox的盒子元素。然后，使用scrollTop属性获取了垂直滚动条位置，并将结果存储在变量scrollTop中。同样地，使用scrollLeft属性获取了水平滚动条位置，并将结果存储在变量scrollLeft中。

最后，我们使用console.log将滚动条位置输出到控制台。

请注意，要获取滚动条位置，盒子元素必须存在滚动条，并且已经发生了滚动。否则，scrollTop和scrollLeft的值将为0。

二、Vue2

要在Vue 2中使用并获取盒子的滚动条位置，你可以使用Vue的指令和实例属性。

首先，确保你已经在项目中引入了Vue，并创建了一个Vue实例。然后，你可以使用v-bind指令将元素的scrollTop和scrollLeft属性绑定到Vue实例中的数据属性上。

以下是一个示例：

<div id="myApp">
  <div id="myBox" v-bind:scroll-top="scrollTop" v-bind:scroll-left="scrollLeft" v-on:scroll="updateScroll">
    <!-- 盒子内容 -->
  </div>
</div>

在上述示例中，我们有一个包含id为myBox的盒子元素。我们使用v-bind指令将scrollTop和scrollLeft属性绑定到Vue实例中的对应数据属性。我们还使用v-on:scroll指令监听盒子的滚动事件，一旦滚动事件发生，就会调用一个方法updateScroll。

接下来，你需要在Vue实例中定义这些数据属性和对应的方法：

new Vue({
  el: '#myApp',
  data: {
    scrollTop: 0,
    scrollLeft: 0
  },
  methods: {
    updateScroll: function(event) {
      this.scrollTop = event.target.scrollTop;
      this.scrollLeft = event.target.scrollLeft;
    }
  }
});

在上述示例中，我们在Vue实例中定义了scrollTop和scrollLeft作为数据属性。当盒子发生滚动事件时，updateScroll方法会被调用。updateScroll方法将滚动条位置（event.target.scrollTop和event.target.scrollLeft）赋值给对应的数据属性。

现在，scrollTop和scrollLeft就会在盒子发生滚动时自动更新，并保持与滚动条位置的同步。

三、Vue3

在Vue 3中，你可以使用Vue Composition API和ref来实现获取盒子的滚动条位置。

首先，确保你已经在项目中引入了Vue 3，并创建了一个Vue实例。然后，你可以在组件的setup()函数中使用ref函数创建响应式的数据，并使用onScroll事件监听盒子的滚动事件。

以下是一个示例：

<template>
  <div id="myBox" ref="boxRef" @scroll="updateScroll">
    <!-- 盒子内容 -->
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 创建响应式的ref对象
    const boxRef = ref(null);
    const scrollTop = ref(0);
    const scrollLeft = ref(0);

    // 滚动事件的处理函数
    const updateScroll = () => {
      scrollTop.value = boxRef.value.scrollTop;
      scrollLeft.value = boxRef.value.scrollLeft;
    };

    return {
      boxRef,
      scrollTop,
      scrollLeft,
      updateScroll
    };
  }
};
</script>

在上述示例中，我们有一个包含ref属性的myBox元素，并在滚动事件上绑定了updateScroll方法。updateScroll方法通过boxRef.value来访问盒子元素并获取滚动条位置，然后将其保存在响应式的scrollTop和scrollLeft ref中。

最后，我们可以在模板中使用这些响应式数据：

<div>
  <p>垂直滚动条位置：{{ scrollTop }}</p>
  <p>水平滚动条位置：{{ scrollLeft }}</p>
</div>

在这个示例中，我们通过双大括号插值语法将scrollTop和scrollLeft的值显示在模板中。