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 >
     <div 
          @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

CodePudding user response：

The problem with your example is event.target is not the scroller element, but the icon.

Use a ref to make sure you're targeting the correct element. ¹

---

Another option is to bind to the scrollLeft HTML property.

We use .camel modifier to bypass the fact that HTML attributes (which is what we use to bind to the property) are case insensitive :scroll-left.camel ^{2, 3}

const { createApp, onMounted, reactive, toRefs } = Vue;
const { min, max } = Math;
createApp({
  setup: () => {
    const state = reactive({
      scroller: null,
      scrollLeft: 0 
    });
    const onWheel = (e) => {
      state.scrollLeft = min(
        state.scroller?.scrollWidth - state.scroller?.offsetWidth,
        max(0, e.deltaY   state.scrollLeft)
      )
    }
    return { ...toRefs(state), onWheel }
  }
}).mount('#app')

#app div span {
  min-width: 50%;
  display: inline-block;
}
#app div {
  display: flex;
  overflow-x: auto;
  cursor: ew-resize;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js"></script>
<div id="app">
  <div ref="scroller"
       @wheel.prevent="onWheel"
       :scroll-left.camel="scrollLeft">
    <span v-for="n in 5" v-text="n" />
  </div>
  <pre v-text="{ scrollLeft }" />
</div>

Notes:

---

¹ - Because we're binding to the scrollLeft prop, we shouldn't need the ref anymore. It's there to allow limiting the scrollLeft value - we read the element's scrollWidth and offsetWidth.
² - technically it should be :scroll-left.camel.prop, since it's an HTML property, but it also works without the .prop modifier
³ - .scroll-left.camel also works (shorthand for :scroll-left.camel.prop).

CodePudding user response：

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.