cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk mensimulasikan tatal sentuh dengan mencengkam dan menyeret tetikus?

<p>Berikut ialah contoh minimum perkara yang saya cuba lakukan: </p> <p><br /></p> <pre class="brush:html;toolbar:false;"><!doctype html> <html lang="en"> <kepala> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <gaya> #kotak { warna latar belakang: merah; lebar: 200px; ketinggian: 250px; limpahan-x: tersembunyi; limpahan-y: tatal; kursor: ambil; } #box div { warna latar belakang: biru; jidar: 30px; lebar: 100px; ketinggian: 100px; } </style> </head> <badan> <div id="box"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </badan> </html></pre> <p><br /></p> <p>Jika anda menggunakan peranti mudah alih, anda boleh menatal melalui <kod>#box</code> Walau bagaimanapun, jika anda menggunakan pelayar desktop, anda mesti menggunakan bar skrol atau roda tetikus anda. </p> <p>Bagaimanakah saya boleh mendayakan tatal dengan meraih (iaitu menahan butang kiri tetikus) dan kemudian menyeret ke atas atau ke bawah (iaitu menggerakkan tetikus)? Bolehkah saya menyelesaikan masalah ini hanya menggunakan CSS? </p>
P粉071626364P粉071626364463 hari yang lalu461

membalas semua(1)saya akan balas

  • P粉714780768

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

    Masalah ini tidak boleh diselesaikan menggunakan CSS sahaja, tetapi ia boleh diselesaikan menggunakan javascript. Saya membuat pelaksanaan untuk anda yang berfungsi secara mendatar dan menegak. Anda juga boleh menukar kelajuan tatal. 

    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>

    balas
    0
  • Batalbalas