我想用鼠标水平滚动图标。我在Javascript中用scrollLeft尝试过，但滚动时该值不会改变。滚动时，只有 deltaY 值在 100 和 -100 之间变化。
有人知道问题出在哪里吗？
当我滚动并且鼠标悬停在滚动条上时，它可以工作，但我希望它可以在整个 div 容器上工作。如果可能的话，我也想在没有依赖项/npm-libraries 的情况下执行此操作。
2
1152import {
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]
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
我尝试了与您类似的方法，但直到我在
event.target.scrollLeft += event.deltaY 中使用在您的 ScrollIcons 方法中。这样，当您在光标悬停在图标上时使用鼠标滚轮时，您将定位到包含的 div 或标签，而不是定位到图标。换句话说，只要您的光标位于包含的 div 和鼠标滚轮中，该 div 就应该做出响应，而不管 div 和鼠标光标之间的任何其他元素如何。currentTarget而不是target时才起作用