マウスをつかんでドラッグしてタッチ スクロールをシミュレートするにはどうすればよいですか?
P粉071626364
P粉071626364 2023-08-26 13:40:28
0
1
448
<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>
P粉071626364
P粉071626364

全員に返信(1)
P粉714780768

この問題は CSS だけでは解決できませんが、JavaScript を使用すると解決できます。水平方向と垂直方向の両方で動作する実装を作成しました。スクロール速度も変更できます。

リーリー リーリー リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート