Vue menatal mendatar

Question

Saya mahu menatal secara mendatar menggunakan ikon tetikus . Saya menggunakan dalam Javascript di mana nilainya berubah antara 100 dan -100. scrollLeft尝试过，但滚动时该值不会改变。滚动时，只有 deltaY

Ada sesiapa tahu di mana masalahnya?

Ia berfungsi apabila saya menatal dan melepasi bar skrol, tetapi saya mahu ia berfungsi pada keseluruhan bekas div. Jika boleh, saya juga ingin melakukan ini tanpa dependencies/npm-libraries.

Templat

<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

Output konsol apabila menatal ke bawah

[100, 0]

Beginilah rupanya

Answer 1

Masalah dengan contoh anda ialah event.target bukan elemen bar skrol, tetapi ikon.

Gunakan ref untuk memastikan anda menyasarkan elemen yang betul. ¹

---

Pilihan lain ialah mengikat pada atribut HTML scrollLeft elemen dan biarkan Vue mengendalikan kemas kini DOM. Anda hanya menukar nilai dalam pengawal.

Kami menggunakan .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

  

    
  
  

Nota:

---

¹ - Memandangkan kami terikat pada harta scrollLeft 属性，所以我们不需要 ref 不再。我保留它是因为我想将控制器 scrollLeft 值限制在有效值内，并且需要 ref, kami tidak memerlukan ref lagi. Saya menyimpannya kerana saya mahu mengehadkan nilai pengawal
kepada nilai yang sah dan diperlukan untuk mengira nilai maksimum. 2:scroll-left.camel.prop，因为它是一个 HTML 属性，但是它也可以在没有 .prop
- Secara teknikal ia sepatutnya berfungsi tanpa pengubah suai 3.scroll-left.camel 也适用（:scroll-left.camel 的简写.prop

- 🎜). 🎜

Answer 2

Saya mencuba pendekatan yang serupa dengan pendekatan anda, tetapi tidak sehingga saya melakukannya event.target.scrollLeft += event.deltaY 中使用 currentTarget 而不是 target 时才起作用 dalam kaedah ScrollIcons anda. Dengan cara ini, apabila anda menggunakan roda tetikus semasa kursor melayang di atas ikon, anda akan menyasarkan div atau label yang mengandungi dan bukannya ikon. Dalam erti kata lain, selagi kursor anda berada dalam div yang mengandungi dan roda tetikus, div harus bertindak balas tanpa mengira sebarang elemen lain antara div dan kursor tetikus.