vue3中监听滚动条、让元素滚动到指定位置、监听元素尺寸变化

vue3中监听滚动条

事件

window.addEventListener("scroll", fn);

使用说明

注意：卸载监听

<script setup>
import { onMounted, onUnmounted} from 'vue'
const fn=(event) => {
  // 处理滚动事件
  console.log(event.target.scrollTop);
  //滚动条高度（滚动元素的总高度）
  const scrollHeight = event.target.scrollHeight;
  //滚动条滚动距离 （滚动条距离其顶部的距离（以像素为单位））
  const scrollTop = event.target.scrollTop;  
  //可视区高度（表示触发滚动事件的元素内部的高度，包括内边距，但不包括水平滚动条、边框和外边距。）
  const clientHeight = event.target.clientHeight;


  //判断是否滚动到底部
  if (scrollTop + clientHeight >= scrollHeight) {
    console.log('到底了!');
  } else {
    console.log('还没到底!');
  }

  //判断滚动到超过或等于200px时执行的方法
  if (scrollTop >= 200) {
    // 滚动条距离顶部超过或等于200px时执行的方法
    console.log('滚动条距离顶部超过或等于200px');
    // 在这里调用你想要执行的方法
  }  

};
onMounted(()=>{
    window.addEventListener("scroll", fn);
})
onUnmounted(()=>{
    window.removeEventListener("scroll", fn);
})
</script>

例子

<template>
  <div ref="scrollableContent" class="scrollable-content">
    <p v-for="i in 30" :key="i">{{ i }}</p>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const scrollableContent = ref(null);

const handleScroll = (event) => {
  const scrollTop = event.target.scrollTop;
  if (scrollTop >= 200) {
    // 滚动条距离顶部超过或等于200px时执行的方法
    console.log('滚动条距离顶部超过或等于200px');
    // 在这里调用你想要执行的方法
  }
};

onMounted(() => {
  scrollableContent.value.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  scrollableContent.value.removeEventListener('scroll', handleScroll);
});
</script>
<style>
.scrollable-content {
  height: 200px;
  overflow: auto;
  border: 1px solid red;
  padding: 0 10px;
}
</style>

vue3让某个元素滚动到指定的位置

在Vue 3中，你可以通过多种方式让某个元素滚动到指定的位置。以下是一些常见的方法，并附上了清晰的代码示例：

方法一：使用scrollIntoView方法

scrollIntoView方法可以将元素滚动到浏览器窗口的可视区域内。你可以通过传递一个配置对象来控制滚动行为，例如是否平滑滚动等。

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="content" v-for="i in 30" :key="i" :id="'item-' + i">
      内容 {{ i }}
    </div>
    <button @click="scrollToElement(25)">滚动到第25个元素</button>
  </div>
</template>

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

const scrollContainer = ref(null);

const scrollToElement = (index) => {
  const targetElement = document.getElementById(`item-${index}`);
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'smooth' });
  }
};
</script>

<style>
.scroll-container {
  height: 300px; /* 设置容器的高度以产生滚动条 */
  overflow-y: auto; /* 允许垂直滚动 */
  border: 1px solid #ccc; /* 可选：为容器添加边框以便更好地观察 */
}

.content {
  height: 100px; /* 设置内容的高度以填充容器并产生滚动条 */
  margin-bottom: 10px; /* 可选：为内容之间添加间距 */
}
</style>

方法二：使用scrollTop属性

你也可以直接设置元素的scrollTop属性来滚动到指定位置。这种方法允许你更精确地控制滚动位置。

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="content" v-for="i in 30" :key="i">
      内容 {{ i }}
    </div>
    <button @click="scrollToPosition(500)">滚动到500px位置</button>
  </div>
</template>

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

const scrollContainer = ref(null);

const scrollToPosition = (position) => {
  if (scrollContainer.value) {
    scrollContainer.value.scrollTop = position;
  }
};
</script>

<style>
/* 与上一个示例相同的样式 */
.scroll-container {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
}

.content {
  height: 100px;
  margin-bottom: 10px;
}
</style>

方法三：使用Vue Router的滚动行为

如果你的应用使用了Vue Router，并且你希望在路由变化时滚动到指定位置，你可以利用路由的滚动行为功能。这通常用于在单页应用中保持滚动位置的一致性。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  // 你的路由定义...
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else if (to.hash) {
      return { selector: to.hash };
    } else {
      return { x: 0, y: 0 };
    }
  },
});

export default router;

Vue3监听元素的尺寸宽度变化

ResizeObserver接口允许你观察一个或多个元素的尺寸变化，并在发生变化时执行回调函数。这是原生JavaScript提供的功能，无需额外安装库。

<template>
  <div ref="myElement" class="my-element">
    这个元素的宽度会变化
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const myElement = ref(null);
let resizeObserver = null;

const handleResize = (entries) => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`宽度: ${width}px, 高度: ${height}px`);
    // 在这里可以执行针对宽高变化的操作
  }
};

onMounted(() => {
  resizeObserver = new ResizeObserver(handleResize);
  resizeObserver.observe(myElement.value);
});

onUnmounted(() => {
  if (resizeObserver) {
    resizeObserver.disconnect();
  }
});
</script>

<style>
.my-element {
  width: 50%; /* 初始宽度，可以通过CSS或其他方式改变 */
  height: 100px;
  background-color: lightblue;
  transition: width 0.5s; /* 添加过渡效果以便观察宽度变化 */
}
</style>