如何通过鼠标抓取和拖动来模拟触摸式滚动？
P粉071626364
2023-08-26 13:40:28
<p>这是我正在尝试做的一个最小示例：</p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#box {
background-color: red;
width: 200px;
height: 250px;
overflow-x: hidden;
overflow-y: scroll;
cursor: grab;
}
#box div {
background-color: blue;
margin: 30px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html></pre>
<p><br /></p>
<p>如果您使用移动设备，则可以通过触摸并向上或向下拖动来滚动浏览 <code>#box</code>。但是，如果您使用的是桌面浏览器，则必须使用滚动条或鼠标滚轮。</p>
<p>如何通过抓取（即按住鼠标左键）然后向上或向下拖动（即移动鼠标）来启用滚动？我可以只用 CSS 解决这个问题吗？</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; }