Search code examples
javascripthtmlcssvue.jsscroll

Vue Horizontal Scrolling

I want to scroll horizontally through icons with my mouse. I tried it with scrollLeft in Javascript, but the value does not change when scrolling. Only the deltaY value changes between 100 and -100 when scrolling.

Does anyone have an idea what the issue could be?

When I scroll and the mouse hovers the scrollbar it works but I want this to work on the entire div-container. I also want to do this without dependencies/npm-libraries if possible.

Template

<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

Console Output when scrolling down

[100, 0]

This is how it looks

enter image description here

Solution

  • I tried something similar to yours and it wasn't working until I used currentTarget instead of target in event.target.scrollLeft += event.deltaY in your ScrollIcons method. This way when you use your mouse wheel while your cursor is over your icons, you will target the containing div or tag, rather than targeting the icons. In other words whenever your cursor is in the containing div and you mouse wheel, the div should respond regardless of any other elements between the div and mouse cursor.