마우스를 잡고 끌면서 터치 스크롤을 시뮬레이션하는 방법은 무엇입니까?
P粉071626364
2023-08-26 13:40:28
<p>다음은 제가 하려는 작업에 대한 최소한의 예입니다.</p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!doctype html>
<html lang="ko">
<머리>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<스타일>
#상자 {
배경색: 빨간색;
너비: 200px;
높이: 250px;
오버플로-x: 숨김;
오버플로-y: 스크롤;
커서: 잡아;
}
#박스 div {
배경색: 파란색;
여백: 30px;
너비: 100px;
높이: 100px;
}
</스타일>
</머리>
<본문>
<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이 문제는 CSS만으로는 해결할 수 없지만, 자바스크립트를 사용하면 해결할 수 있습니다. 수평 및 수직 모두 작동하는 구현을 만들었습니다. 스크롤 속도를 변경할 수도 있습니다.