Wie simuliere ich Touch-Scrolling durch Greifen und Ziehen der Maus?
P粉071626364
2023-08-26 13:40:28
<p>Hier ist ein minimales Beispiel dafür, was ich zu tun versuche: </p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="de">
<Kopf>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<Stil>
#Kasten {
Hintergrundfarbe: rot;
Breite: 200px;
Höhe: 250px;
Überlauf-x: versteckt;
overflow-y: scrollen;
Cursor: greifen;
}
#box div {
Hintergrundfarbe: blau;
Rand: 30px;
Breite: 100px;
Höhe: 100px;
}
</style>
</head>
<Körper>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html></pre>
<p><br /></p>
<p>Wenn Sie ein mobiles Gerät verwenden, können Sie durch das <code>#box</code> scrollen, indem Sie es berühren und nach oben oder unten ziehen. Wenn Sie jedoch einen Desktop-Browser verwenden, müssen Sie die Bildlaufleisten oder Ihr Mausrad verwenden. </p>
<p>Wie aktiviere ich das Scrollen, indem ich greife (d. h. die linke Maustaste gedrückt halte) und dann nach oben oder unten ziehe (d. h. die Maus bewege)? Kann ich dieses Problem nur mit CSS lösen? </p>
仅使用 CSS 无法解决此问题，但可以使用 javascript 解决。我为你做了一个可以水平和垂直工作的实现。还可以更改滚动速度。
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; }