当前位置：首页 > 前端教程

elementui scroll

2026-03-06 07:57:34前端教程

Element UI 滚动相关功能

Element UI 提供了多种与滚动相关的组件和功能，包括滚动条控制、无限滚动、回到顶部等。

自定义滚动条样式

Element UI 的滚动条可以通过 CSS 进行自定义。以下是一个修改滚动条样式的示例代码：

elementui scroll

/* 修改滚动条轨道 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #f5f5f5;
}

/* 修改滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #c1c1c1;
}

/* 修改滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

无限滚动组件

Element UI 提供了 el-infinite-scroll 指令，可用于实现无限滚动加载功能：

<template>
  <div v-el-infinite-scroll="loadMore" :infinite-scroll-disabled="disabled">
    <!-- 内容项 -->
    <div v-for="item in list" :key="item.id">{{ item.content }}</div>
    <!-- 加载提示 -->
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      noMore: false,
      page: 1
    }
  },
  computed: {
    disabled() {
      return this.loading || this.noMore
    }
  },
  methods: {
    loadMore() {
      this.loading = true
      // 模拟异步加载数据
      setTimeout(() => {
        // 加载数据逻辑
        this.loading = false
        this.page++
        if(this.page > 5) {
          this.noMore = true
        }
      }, 1000)
    }
  }
}
</script>

回到顶部组件

Element UI 提供了 el-backtop 组件，可以方便地实现回到顶部功能：

elementui scroll

<template>
  <div class="long-content">
    <!-- 长内容 -->
    <div v-for="n in 100" :key="n">内容行 {{ n }}</div>

    <!-- 回到顶部按钮 -->
    <el-backtop target=".long-content" :visibility-height="200" :right="50" :bottom="50">
      <div class="back-top-inner">UP</div>
    </el-backtop>
  </div>
</template>

<style>
.long-content {
  height: 400px;
  overflow-y: auto;
}
.back-top-inner {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #409EFF;
  color: white;
  border-radius: 50%;
}
</style>

滚动监听

可以通过原生事件监听实现滚动位置监控：

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if(scrollTop > 200) {
      // 执行滚动到一定位置后的逻辑
    }
  }
}

滚动到指定位置

使用原生方法实现平滑滚动到指定位置：

scrollToElement(elementId) {
  const element = document.getElementById(elementId)
  if(element) {
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  }
}