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>
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]
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le problème avec votre exemple est que
event.targetn'est pas l'élément de la barre de défilement, mais l'icône.Utilisez
refpour vous assurer de cibler le bon élément. 1Une autre option consiste à se lier à l'attribut HTML
scrollLeftde 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.camel2, 3const { 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; }Remarque :
1 - Puisque nous nous lions à la propriété
- 🎜). 🎜scrollLeft属性，所以我们不需要ref不再。我保留它是因为我想将控制器scrollLeft值限制在有效值内，并且需要ref, nous n'avons plus besoin duref. Je l'ai gardé parce que je voulais limiter les valeursdu 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 的简写.propJ'ai essayé une approche similaire à la vôtre, mais pas avant de l'avoir fait
event.target.scrollLeft += event.deltaY 中使用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.currentTarget而不是target时才起作用