Vue鼠标横向滚动图标问题求助：scrollLeft值无法更新

希望通过鼠标在整个.icons容器上滚动来横向浏览图标，尝试用JavaScript的scrollLeft实现，但滚动时scrollLeft值始终为0，仅deltaY在100/-100之间变化。只有鼠标悬停在滚动条上时滚动才生效，需不依赖第三方库解决。

相关代码 #

模板代码 #

<div class="icons flex_center_h flex_between">
     <div class="flex_center_h flex_start instIconContainer"
          @wheel="ScrollIcons($event)">

          <FilterIcon
              v-for="(icon, iconIndex) in rooms[index].description.icons"
                 :key="icon"
                 :icon="rooms[index].description.icons[iconIndex].icon"
                 :customClass="'instIcon'" />
     </div>

          <FilterIcon :customClass="'navIcon'" :icon="'nav'" />
</div>

JavaScript代码 #

import {
    FilterIcon
} from '@/components/Elements/'

export default {
    components: {
        FilterIcon,
    },
    computed: {
        rooms() {
            return this.$store.state.rooms
        }

    },
    methods: {
        ScrollIcons(event) {
            event.preventDefault()
            event.target.scrollLeft += event.deltaY
            console.log([event.deltaY, event.target.scrollLeft])
        }
    }
}

Sass代码 #

.icons
    background: $bg
    width: 80%
    padding: 0.5rem 0.5rem
    ::-webkit-scrollbar
        width: $scrollbarSize
        height: 0.3rem
        background: $bg-glow
        border-radius: $radius_1
    ::-webkit-scrollbar-thumb
        background: $purple
        border-radius: $radius_1
    .instIconContainer
        width: 70%
        max-width: calc(40px * 4)
        max-height: 80px
        overflow-x: auto
        .instIcon
            width: $IconSize
            height: $IconSize
            min-width: $IconSize
            min-height: $IconSize
            path, circle
                fill: $purple

控制台输出（向下滚动时） #

[100, 0]

效果展示 #

1. 事件绑定范围错误：@wheel绑定在了.instIconContainer上，而非整个.icons容器，导致只有在该子容器内滚动才会触发事件。
2. 目标元素错误：event.target指向的是触发事件的具体子元素（如图标组件），这些元素没有设置overflow-x: auto，其scrollLeft值始终为0，修改它不会影响实际的滚动容器。

步骤1：调整事件绑定位置 #

把@wheel绑定到外层的.icons容器，让整个区域的滚动都能触发事件：

<div class="icons flex_center_h flex_between" @wheel="ScrollIcons($event)">
     <div class="flex_center_h flex_start instIconContainer">

          <FilterIcon
              v-for="(icon, iconIndex) in rooms[index].description.icons"
                 :key="icon"
                 :icon="rooms[index].description.icons[iconIndex].icon"
                 :customClass="'instIcon'" />
     </div>

          <FilterIcon :customClass="'navIcon'" :icon="'nav'" />
</div>

步骤2：正确获取滚动容器 #

在方法中直接定位到.instIconContainer，避免依赖event.target，推荐使用$refs获取元素：

模板添加ref #

<div class="flex_center_h flex_start instIconContainer" ref="iconContainer">

修改JavaScript方法 #

methods: {
    ScrollIcons(event) {
        event.preventDefault()
        const scrollContainer = this.$refs.iconContainer
        // 累加deltaY实现横向滚动，可加系数调整速度
        scrollContainer.scrollLeft += event.deltaY
    }
}

如果不想用$refs，也可以通过DOM查询获取容器：

methods: {
    ScrollIcons(event) {
        event.preventDefault()
        const scrollContainer = this.$el.querySelector('.instIconContainer')
        scrollContainer.scrollLeft += event.deltaY
    }
}

补充优化 #

如果觉得滚动速度过快或过慢，可以给event.deltaY乘以一个系数调整，例如：

scrollContainer.scrollLeft += event.deltaY * 0.7

内容的提问来源于stack exchange，提问作者Marcus Harting