Scrolling Horizontally in Vue

Question

Scrolling Horizontally in Vue

I am trying to achieve horizontal scrolling through icons using my mouse. I attempted to use scrollLeft in Javascript, but the value remains unchanged while scrolling. Instead, only the deltaY value fluctuates between 100 and -100 during scrolling.

Does anyone have any suggestions on what could be causing this issue?

While scrolling with the mouse over the scrollbar functions correctly, I aim for it to work throughout the entire div-container without relying on external dependencies or npm-libraries if feasible.

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'" /

Javascript

iport {
    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

https://i.sstatic.net/Tl0fm.png

javascript html css vue.js scroll

Answer 1

Answer №1

After experimenting with a method similar to yours, I found that the key to success was switching from using target to currentTarget in the line

event.target.scrollLeft += event.deltaY

within your ScrollIcons function. By making this change, the functionality improved significantly. Now, when navigating with the mouse wheel over the icons, it accurately targets the encompassing div or tag instead of just the icons themselves. Essentially, whenever the cursor hovers over the containing div and the mouse wheel is used, the div responds appropriately, irrespective of any other elements positioned between the div and the cursor.

Answer 2

After experimenting with a method similar to yours, I found that the key to success was switching from using target to currentTarget in the line

event.target.scrollLeft += event.deltaY

within your ScrollIcons function. By making this change, the functionality improved significantly. Now, when navigating with the mouse wheel over the icons, it accurately targets the encompassing div or tag instead of just the icons themselves. Essentially, whenever the cursor hovers over the containing div and the mouse wheel is used, the div responds appropriately, irrespective of any other elements positioned between the div and the cursor.

Answer 3

Answer №2

Your example is facing an issue where event.target is pointing to the icon instead of the scroller element.

To ensure you are targeting the correct element, consider using a ref. ¹

Another approach is to bind to the scrollLeft HTML property of the element and delegate DOM updates to Vue. You only need to modify the value in the controller.

We utilize the .camel modifier to handle the case insensitivity of HTML attributes used for property binding: :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 = state.scroller
        ? min(
            state.scroller.scrollWidth - state.scroller.offsetWidth,
            max(0, e.deltaY + state.scrollLeft)
          )
        : 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:

¹ - As we are binding to the scrollLeft prop, the ref might not be necessary anymore. It's included here to limit the controller's scrollLeft value within valid ranges.
² - Technically, it should be :scroll-left.camel.prop since it's an HTML property, but it also functions without the .prop modifier.
³ - The shorthand form .scroll-left.camel also works (equivalent to :scroll-left.camel.prop).

Answer 4

Your example is facing an issue where event.target is pointing to the icon instead of the scroller element.

To ensure you are targeting the correct element, consider using a ref. ¹

Another approach is to bind to the scrollLeft HTML property of the element and delegate DOM updates to Vue. You only need to modify the value in the controller.

We utilize the .camel modifier to handle the case insensitivity of HTML attributes used for property binding: :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 = state.scroller
        ? min(
            state.scroller.scrollWidth - state.scroller.offsetWidth,
            max(0, e.deltaY + state.scrollLeft)
          )
        : 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:

¹ - As we are binding to the scrollLeft prop, the ref might not be necessary anymore. It's included here to limit the controller's scrollLeft value within valid ranges.
² - Technically, it should be :scroll-left.camel.prop since it's an HTML property, but it also functions without the .prop modifier.
³ - The shorthand form .scroll-left.camel also works (equivalent to :scroll-left.camel.prop).

Scrolling Horizontally in Vue

Template

Javascript

Sass

Console Output when scrolling down

This is how it looks

Answer №1

Answer №2

Similar questions

Reduce the line length for better readability

error is not defined in the onsuccess function of the ajax.beginform partial view

an li element is accompanied by a visible box

Refreshing an HTML table using instance variables from a C# class (utilizing jQuery and AJAX)

Creating a centered floating card within a div that shrinks to fit its contents: A CSS how-to guide

Exploring the depths of recursion with jQuery: Unraveling the

Activate an alert function when the text inside a div reaches the value of 10

The specified element "errors" is not found in the VeeValidate template

Is combining a DateTime with a time string possible using Luxon?

Tips for adjusting the color of a row when hovering

What could be causing the hang when attempting to insert a script using Bookshelf.js?

Notification following the closure of a modal page in APEX version 23.1

Using jQuery to manipulate the radio button input's alternate content in HTML attributes

The divs are causing the site to grow larger and are not lining up correctly

Redirecting Permalinks on a WordPress Website

Tips on integrating data from Vuex into your component

Divide the firestore request into multiple filters

Using three.js to establish an Image for Particle

Encountering issues while trying to access 'weather' in NuxtJS API call due to undefined properties

Discover the steps to dynamically alter the inclusion of the Bootstrap CSS file within an Angular project