Vue défilement horizontal

Question

Je veux faire défiler l'icône horizontalement avec la souris. Je l'ai essayé avec scrollLeft en Javascript mais la valeur ne change pas lors du défilement. Lors du défilement, seule la valeur deltaY change entre 100 et -100. Est-ce que quelqu'un sait où est le problème ? Cela fonctionne lorsque je fais défiler et survole la barre de défilement, mais je veux que cela fonctionne sur l'ensemble du conteneur div. J'aimerais également le faire sans dépendances/bibliothèques npm si possible. Modèle

P粉422227023 · Answer

Le problème avec votre exemple est que event.target n'est pas l'élément de la barre de défilement, mais l'icône.

Utilisez ref pour vous assurer de cibler le bon élément. ¹

Une autre option consiste à se lier à l'attribut HTML scrollLeft de l'élément et à laisser Vue gérer les mises à jour du DOM. Vous modifiez simplement la valeur dans le contrôleur.

Nous utilisons .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

Remarque :

¹ - Puisque nous nous lions à la propriété scrollLeft 属性，所以我们不需要 ref 不再。我保留它是因为我想将控制器 scrollLeft 值限制在有效值内，并且需要 ref, nous n'avons plus besoin du ref. Je l'ai gardé parce que je voulais limiter les valeurs
du contrôleur à des valeurs valides et j'avais besoin de calculer la valeur maximale. 2:scroll-left.camel.prop，因为它是一个 HTML 属性，但是它也可以在没有 .prop
- Techniquement, cela devrait fonctionner sans le modificateur 3.scroll-left.camel 也适用（:scroll-left.camel 的简写.prop

- 🎜). 🎜

P粉434996845 · Answer

J'ai essayé une approche similaire à la vôtre, mais pas avant de l'avoir fait event.target.scrollLeft += event.deltaY 中使用 currentTarget 而不是 target 时才起作用 dans votre méthode ScrollIcons. De cette façon, lorsque vous utilisez la molette de la souris pendant que le curseur survole l'icône, vous ciblerez le div ou l'étiquette contenant au lieu de l'icône. En d’autres termes, tant que votre curseur se trouve dans le div contenant et dans la molette de la souris, le div doit répondre quels que soient les autres éléments entre le div et le curseur de la souris.

[100, 0]