Vue menatal mendatar

Question

Saya mahu menatal ikon secara mendatar dengan tetikus. Saya mencubanya dengan scrollLeft dalam Javascript tetapi nilainya tidak berubah apabila menatal. Apabila menatal, hanya nilai deltaY berubah antara 100 dan -100. Adakah sesiapa tahu di mana masalahnya? Ia berfungsi apabila saya menatal dan melepasi bar skrol, tetapi saya mahu ia berfungsi pada keseluruhan bekas div. Saya juga ingin melakukan ini tanpa dependencies/npm-libraries jika boleh. Templat

P粉422227023 · Answer

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

- 🎜). 🎜

P粉434996845 · Answer

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.

[100, 0]