vue3监听横向滚动条的位置；鼠标滚轮滑动控制滚动条滚动；监听滚动条到顶端

i_am_a_div_日积月累_2024-12-18 11:29

1.横向取值scrollLeft 竖向取值scrollTop

2.可以监听到最左最右侧

3.鼠标滚轮滑动控制滚动条滚动

效果

javascript 复制代码

<template>
  <div>
    <div class="scrollable" ref="scrollableRef">
      <!-- 内容 -->
      <div style="width: 2000px; height: 100px;">横向滚动内容</div>
    </div>
    <p>横向滚动位置: {{ scrollPosition }}</p>
    <p v-if="isAtLeft">已滚动到最左侧</p>
    <p v-if="isAtRight">已滚动到最右侧</p>
  </div>
</template>

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

const scrollPosition = ref(0);
const isAtLeft = ref(false);
const isAtRight = ref(false);
const scrollableRef = ref(null);

// 处理滚动事件
const handleScroll = () => {
  if (scrollableRef.value) {
    scrollPosition.value = scrollableRef.value.scrollLeft; // 获取横向滚动位置

    // 判断是否滚动到最左侧
    isAtLeft.value = scrollableRef.value.scrollLeft === 0;

    // 判断是否滚动到最右侧
    isAtRight.value = scrollableRef.value.scrollLeft + scrollableRef.value.clientWidth >= scrollableRef.value.scrollWidth;
  }
};

// 处理鼠标滚轮事件
const handleWheel = (event) => {
  if (scrollableRef.value) {
    event.preventDefault(); // 防止默认的垂直滚动
    // 根据鼠标滚轮的方向调整 scrollLeft
    scrollableRef.value.scrollLeft += event.deltaY; // deltaY 表示垂直滚动的距离
    handleScroll(); // 更新滚动位置
  }
};

// 添加和移除事件监听器
onMounted(() => {
  if (scrollableRef.value) {
    scrollableRef.value.addEventListener('scroll', handleScroll);
    scrollableRef.value.addEventListener('wheel', handleWheel); // 添加鼠标滚轮事件监听
  }
});

onBeforeUnmount(() => {
  if (scrollableRef.value) {
    scrollableRef.value.removeEventListener('scroll', handleScroll);
    scrollableRef.value.removeEventListener('wheel', handleWheel); // 移除鼠标滚轮事件监听
  }
});
</script>

<style>
.scrollable {
  width: 300px; /* 设置宽度以启用横向滚动 */
  overflow-x: auto; /* 启用水平滚动 */
  border: 1px solid #ccc;
}
</style>