我想用滑鼠水平滾動圖示。我在Javascript中用scrollLeft嘗試過，但滾動時該值不會改變。滾動時，只有 deltaY 值在 100 和 -100 之間變化。
有人知道問題出在哪裡嗎？
當我滾動並且滑鼠懸停在滾動條上時，它可以工作，但我希望它可以在整個 div 容器上工作。如果可能的話，我也想在沒有依賴項/npm-libraries 的情況下執行此操作。
<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]
您的範例的問題是
event.target不是滾動條元素，而是圖示。使用
ref確保您定位到正確的元素。 1另一個選項是綁定到元素的
scrollLeftHTML 屬性並讓 Vue 處理 DOM 更新。您只需更改控制器中的值。我們使用
.camel修飾符來繞過HTML 屬性（我們用來綁定到屬性的屬性）不區分大小寫的事實:scroll-left.camel2, 3const { 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; }註解：
1 - 因為我們綁定到
scrollLeft屬性，所以我們不需要ref不再。我保留它是因為我想將控制器scrollLeft值限制在有效值內，並且需要ref來計算最大值。2 - 從技術上講，它應該是
:scroll-left.camel.prop，因為它是一個HTML 屬性，但是它也可以在沒有.prop修飾符的情況下工作3 -
.scroll-left.camel也適用（:scroll-left.camel 的簡寫.prop）。我嘗試了與您類似的方法，但直到我在
event.target.scrollLeft = event.deltaY 中使用在您的ScrollIcons 方法中。這樣，當您在遊標懸停在圖示上時使用滑鼠滾輪時，您將定位到包含的 div 或標籤，而不是定位到圖示。換句話說，只要您的遊標位於包含的 div 和滑鼠滾輪中，該 div 就應該做出回應，而不管 div 和滑鼠遊標之間的任何其他元素如何。currentTarget而不是target# 時才起作用