Vue橫向捲動

Question

我想用滑鼠水平滾動圖示。我在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>

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])
        }
    }
}

薩斯

.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]

這就是它的樣子

Answer 1

您的範例的問題是 event.target 不是滾動條元素，而是圖示。

使用 ref 確保您定位到正確的元素。 ¹

---

另一個選項是綁定到元素的 scrollLeft HTML 屬性並讓 Vue 處理 DOM 更新。您只需更改控制器中的值。

我們使用.camel 修飾符來繞過HTML 屬性（我們用來綁定到屬性的屬性）不區分大小寫的事實: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;
}

sssccc

  

    
  
  

註解：

---

¹ - 因為我們綁定到scrollLeft 屬性，所以我們不需要ref 不再。我保留它是因為我想將控制器 scrollLeft 值限制在有效值內，並且需要 ref 來計算最大值。
² - 從技術上講，它應該是:scroll-left.camel.prop，因為它是一個HTML 屬性，但是它也可以在沒有.prop 修飾符的情況下工作
³ - .scroll-left.camel 也適用（:scroll-left.camel 的簡寫.prop）。

Answer 2

我嘗試了與您類似的方法，但直到我在event.target.scrollLeft = event.deltaY 中使用currentTarget 而不是target# 時才起作用 在您的ScrollIcons 方法中。這樣，當您在遊標懸停在圖示上時使用滑鼠滾輪時，您將定位到包含的 div 或標籤，而不是定位到圖示。換句話說，只要您的遊標位於包含的 div 和滑鼠滾輪中，該 div 就應該做出回應，而不管 div 和滑鼠遊標之間的任何其他元素如何。