Comment simuler le défilement tactile en saisissant et en faisant glisser la souris ?
P粉071626364
2023-08-26 13:40:28
<p>Voici un exemple minimal de ce que j'essaie de faire : </p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="fr">
<tête>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#boîte {
couleur de fond : rouge ;
largeur : 200 px ;
hauteur : 250 px ;
overflow-x : caché ;
overflow-y : défilement ;
curseur : saisir ;
}
#boîte div {
couleur de fond : bleu ;
marge : 30px ;
largeur : 100 px ;
hauteur : 100px ;
}
</style>
≪/tête>
<corps>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</corps>
</html></pre>
<p><br /></p>
<p>Si vous utilisez un appareil mobile, vous pouvez faire défiler <code>#box</code> en touchant et en faisant glisser vers le haut ou vers le bas. Cependant, si vous utilisez un navigateur de bureau, vous devez utiliser les barres de défilement ou la molette de votre souris. </p>
<p>Comment puis-je activer le défilement en saisissant (c'est-à-dire en maintenant enfoncé le bouton gauche de la souris), puis en le faisant glisser vers le haut ou le bas (c'est-à-dire en déplaçant la souris) ? Puis-je résoudre ce problème en utilisant uniquement CSS ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ce problème ne peut pas être résolu en utilisant CSS seul, mais il peut être résolu en utilisant javascript. J'ai réalisé pour vous une implémentation qui fonctionne à la fois horizontalement et verticalement. Vous pouvez également modifier la vitesse de défilement.
const box = document.getElementById('box'); let isDown = false; let startX; let startY; let scrollLeft; let scrollTop; box.addEventListener('mousedown', (e) => { isDown = true; startX = e.pageX - box.offsetLeft; startY = e.pageY - box.offsetTop; scrollLeft = box.scrollLeft; scrollTop = box.scrollTop; box.style.cursor = 'grabbing'; }); box.addEventListener('mouseleave', () => { isDown = false; box.style.cursor = 'grab'; }); box.addEventListener('mouseup', () => { isDown = false; box.style.cursor = 'grab'; }); document.addEventListener('mousemove', (e) => { if (!isDown) return; e.preventDefault(); const x = e.pageX - box.offsetLeft; const y = e.pageY - box.offsetTop; const walkX = (x - startX) * 1; // Change this number to adjust the scroll speed const walkY = (y - startY) * 1; // Change this number to adjust the scroll speed box.scrollLeft = scrollLeft - walkX; box.scrollTop = scrollTop - walkY; });#box { background-color: red; width: 200px; height: 250px; overflow-x: hidden; overflow-y: scroll; } #box div { background-color: blue; margin: 30px; width: 100px; height: 100px; }