Utilisez la molette de la souris pour zoomer sur la page, cliquez et faites glisser pour déplacer la page

Question

Comment utiliser la molette de la souris pour créer des effets de défilement et de panoramique sur toute la page ? Fondamentalement, comme n'importe quel éditeur 2D, faites défiler pour zoomer et cliquez et faites glisser pour effectuer un panoramique, mais pour tout le corps.

Je ne trouve aucune information à ce sujet en ligne.

Answer 1

Si vous ne savez pas par où commencer, vous vous heurterez rapidement à un mur, car savoir par où commencer est la partie la plus facile. Voici un guide approximatif :

1. Ajoutez un auditeur d'événement à l'événement wheel (découvrez comment](https://stackoverflow.com/a/51276012/104380 a>))
2. De la valeur initiale (actuelle) zoom 值开始，计算轮子事件的增量并更新您的 zoom.
3. Utilisez zoom 值以某种形式操纵页面的比例。您可以在 body 元素上使用 CSS transform:scale() à cet effet.
4. Ajoutez un écouteur d'événement pour l'événement mousemove (découvrez comment](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event))
5. Agissez en fonction du mouvement détecté de la souris et calculez la quantité de l'élément body qui doit être zoomée pour atteindre l'un des 4 bords, plutôt qu'au-delà. Le panoramique peut être effectué via CSS transform:translate(x, y)