I want to use the mouse to scroll horizontally icon. I tried it with scrollLeft in Javascript but the value doesn't change when scrolling. As you scroll, only the deltaY value changes between 100 and -100.
Does anyone know where the problem is?
It works when I scroll and mouseover the scrollbar, but I want it to work on the entire div container. I'd also like to do this without dependencies/npm-libraries if possible.
<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>
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])
}
}
}
.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]
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The problem with your example is that
event.targetis not the scrollbar element, but the icon.Use
refto ensure you target the correct element. 1Another option is to bind to the element's
scrollLeftHTML attribute and let Vue handle the DOM updates. You just change the value in the controller.We use the
.camelmodifier to get around the fact that HTML attributes (which we use to bind to properties) are not case sensitive:scroll-left.cameltwenty threeconst { 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; }Comments:
1 - Since we're binding to the
scrollLeftproperty, we don't need therefanymore . I kept it because I wanted to limit the controllerscrollLeftvalue to valid values and needed therefto calculate the maximum value.2 - Technically, it should be
:scroll-left.camel.prop, since it's an HTML property, But it also works without.propmodifier3 -
.scroll-left.camelalso applies (: abbreviation for scroll-left.camel.prop).I tried something similar to yours but it didn't work until I used
currentTargetIn your ScrollIcons method. This way, when you use the mouse wheel while the cursor is hovering over the icon, you will target the containing div or label instead of the icon. In other words, as long as your cursor is within the containing div and the mouse wheel, the div should respond regardless of any other elements between the div and the mouse cursor.instead oftargetinevent.target.scrollLeft = event.deltaY