recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment simuler le défilement tactile en saisissant et en faisant glisser la souris ?

<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>
P粉071626364P粉071626364461 Il y a quelques jours454

répondre à tous(1)je répondrai

  • P粉714780768

    P粉7147807682023-08-27 00:26:34

    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;
}
    <div id="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

    répondre
    0
  • Annulerrépondre