Vue horizontales Scrollen

Question

Ich möchte mit dem Maussymbol horizontal scrollen. Ich verwende in Javascript, wobei sich der Wert zwischen 100 und -100 ändert. scrollLeft尝试过，但滚动时该值不会改变。滚动时，只有 deltaY

Weiß jemand, wo das Problem liegt?

Es funktioniert, wenn ich scrolle und mit der Maus über die Bildlaufleiste fahre, aber ich möchte, dass es für den gesamten Div-Container funktioniert. Wenn möglich, möchte ich dies auch ohne Abhängigkeiten/npm-Bibliotheken tun.

Vorlage

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

Saas

.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

Konsolenausgabe beim Herunterscrollen

[100, 0]

So sieht es aus

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;
}

注释：

---

¹ - 因为我们绑定到 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 和鼠标光标之间的任何其他元素如何。