【Vue】鼠标滚轮横向滚动操作设计

需求：

鼠标滑轮滚动，操作横向滚动条

解决：

监控滚动操作，根据滚动偏移量，修改横向滚动条的位置

<template><div class="image_view"><div class="image_content"><divv-for="(item, index) in 20":key="item"class="image_item":style="{ background: colors[index % colors.length] }"></div></div></div>
</template><script setup>
import TipsFooterVue from "@/components/base/TipsFooter.vue";
import { onMounted } from "vue";const colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];onMounted(() => {// 获取 domlet div = document.querySelector(".image_content");// 监听 domdiv.addEventListener("wheel", function (e) {let left = -e.wheelDelta || e.deltaY / 2;console.log("wheelDelta:", -e.wheelDelta, "deltaY :", e.deltaY);// 修改滚动条位置div.scrollLeft = div.scrollLeft + left;});
});
</script><style lang="less" scoped>
.image_view {width: 100%;.image_content {width: 100%;height: 200px;display: flex;flex-direction: row;overflow-x: auto;overflow-y: hidden;.image_item {width: 300px;height: 200px;flex: 0 0 auto;}}
}
</style>