マウスをつかんでドラッグしてタッチ スクロールをシミュレートするにはどうすればよいですか?
P粉071626364
2023-08-26 13:40:28
<p>これが私がやろうとしていることの最小限の例です: </p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="ja">
<頭>
<メタ文字セット="utf-8">
<meta name="viewport" content="width=device-width、initial-scale=1">
<スタイル>
＃箱 {
背景色: 赤;
幅: 200ピクセル;
高さ: 250ピクセル;
オーバーフロー-x: 非表示;
オーバーフロー-y: スクロール;
カーソル: グラブ;
}
#box div {
背景色: 青;
マージン: 30px;
幅: 100ピクセル;
高さ: 100ピクセル;
}
</スタイル>
</head>
<本体>
<div id="ボックス">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</ボディ>
</html></pre>
<p><br /></p>
<p>モバイル デバイスを使用している場合は、<code>#box</code> をタッチして上下にドラッグすると、スクロールできます。ただし、デスクトップ ブラウザを使用している場合は、スクロール バーまたはマウス ホイールを使用する必要があります。 </p>
<p>掴んで (つまり、マウスの左ボタンを押したままにして) 上下にドラッグ (つまり、マウスを動かす) ことによってスクロールを有効にするにはどうすればよいですか? CSS だけを使用してこの問題を解決できますか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
この問題は CSS だけでは解決できませんが、JavaScript を使用すると解決できます。水平方向と垂直方向の両方で動作する実装を作成しました。スクロール速度も変更できます。