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 和鼠标光标之间的任何其他元素如何。