前端开发
CSS
HTML+CSS
响应式设计（Responsive web design）
Vue.js

关于在VUE中控制滚动条的方法有哪些？

我想在VUE中控制滚动条的位置。 然而发现网上关于滚动条的控制，都是JS/JQ通过操控DOM节点调用方法来实现的，这不符合VUE“不操控DOM，而是传…
关注者
10
被浏览
19,271

2 个回答

比如要解决“vue-router切换页面后让滚动条回到顶部，而不是保持在原来的位置”这个问题

（这也是我遇到过的问题之一）。

方法1.在history模式下：

参见文档： 滚动行为 · vue-router

文档中说：“使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。” 

//这个只在 HTML5 history 模式下可用
export default new Router({
    mode: 'history',
    routes: routeArray,
    scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }

方法2.不使用history模式 

//你可以在main.js入口文件配合vue-router写这个试试
router.afterEach((to,from,next) => {
    window.scrollTo(0,0);

这两种方法我都试过，都是有效的。

如果有其他的好方法，一定私信告诉我奥~~~~

在 Vue3.2 中，可以通过 $refs 和 window.scrollY 来获取滚动条的高度。具体实现代码如下：

  1. 在模板中添加 ref 属性 
<template>
  <div ref="scrollArea"></div>
</template>

2.在组件中使用 $refs 获取 DOM 元素，并监听滚动事件 

<script>
import { onMounted, onUnmounted } from 'vue'
export default {
  setup() {
    let scrollAreaRef = null // 定义变量用于存储 DOM 元素
    onMounted(() => {
      // 获取 DOM 元素
      scrollAreaRef = document.querySelector('[ref="scrollArea"]')
      // 监听滚动事件
      window.addEventListener('scroll', handleScroll)
    onUnmounted(() => {
      // 移除滚动事件监听
      window.removeEventListener('scroll', handleScroll)
    const handleScroll = () => {
      const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop
      console.log(scrollTop) // 输出滚动条高度
    return {}
</script>

在 handleScroll 函数中，使用 window.scrollY 获取滚动条高度，如果浏览器不支持 window.scrollY ，则使用 document.documentElement.scrollTop 或 document.body.scrollTop 获取滚动条高度。

除了在组件中使用 $refs 和 window.scrollY 获取滚动条高度外，Vue3.2 还提供了 v-scroll 指令来监听元素的滚动事件，并且可以直接获取滚动条高度。

具体实现代码如下： 

<template>
  <div v-scroll="handleScroll"></div>
</template>
<script>
export default {
  setup() {
    const handleScroll = (event) => {
      const scrollTop = event.target.scrollTop
      console.log(scrollTop) // 输出滚动条高度
    return {
      handleScroll
</script>

在模板中使用 v-scroll 指令，并传入处理滚动事件的方法 handleScroll 。在 handleScroll 方法中，通过 event.target.scrollTop 获取滚动条高度。

除了使用 $refs 和 v-scroll 指令来获取滚动条高度外，还可以通过 Vue3.2 中的 Composition API 来实现。具体实现代码如下： 

<template>
  <div ref="scrollArea"></div>
</template>
<script>
import { onMounted, onUnmounted, ref } from 'vue'
export default {
  setup() {
    const scrollAreaRef = ref(null) // 定义 ref 变量
    onMounted(() => {
      // 获取 DOM 元素
      scrollAreaRef.value = document.querySelector('[ref="scrollArea"]')
      // 监听滚动事件
      scrollAreaRef.value.addEventListener('scroll', handleScroll)
    onUnmounted(() => {
      // 移除滚动事件监听
      scrollAreaRef.value.removeEventListener('scroll', handleScroll)
    const handleScroll = () => {
      const scrollTop = scrollAreaRef.value.scrollTop
      console.log(scrollTop) // 输出滚动条高度
    return {