Vue défilement horizontal

Question

Je souhaite faire défiler horizontalement à l'aide de l'icône de la souris . J'utilise en Javascript où la valeur change entre 100 et -100. scrollLeft尝试过，但滚动时该值不会改变。滚动时，只有 deltaY

Est-ce que quelqu'un sait où est le problème ?

Cela fonctionne lorsque je fais défiler et que je passe la souris sur la barre de défilement, mais je veux que cela fonctionne sur l'ensemble du conteneur div. Si possible, j'aimerais également le faire sans dépendances/bibliothèques npm.

Modèle

<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

Sortie de la console lors du défilement vers le bas

[100, 0]

Voici à quoi ça ressemble

Answer 1

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

- 🎜). 🎜

Answer 2

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.