내비게이션
페이지 크기를 조정하면 요소가 표시 영역 위로 오버플로되어 위로 스크롤하여 볼 수 없습니다. 해결책이 있는 질문을 찾았지만 작동하지 않았습니다. 두 개의 "핵심" 보이지 않는 div와 모든 콘텐츠를 포함하는 하나의 div 요소가 있습니다.
이 문제를 해결하려고 하기 때문에 "컨테이너" div가 존재합니다.
.container { 위치: 고정; 상단: 0; 왼쪽: 0; 너비: 100%; 높이: 100%; Z-색인: 500; } .메인 콘텐츠 { 디스플레이: 플렉스; 너비: 100%; 높이: 100%; 오버플로: 자동; 여백: 자동; } .창문 { /*높이: 16vw; 너비: 27vw;*/ 디스플레이: 플렉스; 높이: 550px; 너비: 800px; 위치: 절대; 최고: 50%; 왼쪽: 50%; 테두리: 파란색 5px; 배경색: 검정색; 여백: 자동; 오버플로: 숨김; } 
내비게이션
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이 문제의 유일한 해결책은 사용자 정의 스크롤바를 만드는 것입니다(이미지를 뷰포트 위에 배치해야 하는 경우)
귀하의 코드를 바탕으로 제가 만든 코드입니다
설명
기본적으로는 HTML과 CSS를 이용해 스크롤바를 만들어서 이미지의 가장 오른쪽에 배치했어요
HTML과 CSS를 이해할 수 있기를 바랍니다. 이제 JavaScript 부분을 살펴보겠습니다
먼저 마우스 좌표를 매핑합니다
으아악함수를 호출하거나 정지 드래그 변수를 변경하는 이벤트 리스너를 만듭니다
으아악그런 다음 startDrag() 함수를 만듭니다
으아악이 함수에서는 사용자가 현재 스크롤 막대를 드래그하고 있기 때문에 먼저 stopdrag를 false로 설정합니다. 그런 다음 간격 루프 코드를 설정합니다. 좌표에 따르면 mouse.y는 대부분 시행착오를 겪습니다. 한도 내에 있는지 확인하고, 그렇다면 재배치합니다. 그런 다음 드래그하는 동안 스크롤 막대의 상단 위치를 변경합니다(계산은 시행착오입니다). 그런 다음 창 클래스 div의 아래쪽 위치를 변경하여 창 클래스 div의 위치를 변경합니다(이미지 자체는 위치를 변경할 수 없기 때문입니다. 전체 창 클래스 div를 이동하지 않으려면 그 위에 다른 컨테이너를 만들 수 있습니다). 그것을 보려면 드래그가 멈추면 간격이 지워집니다
이 문제를 해결해 주신 @TylerH에게 감사드립니다. 문제는 내 HTML의 변환 스타일에 있습니다. 제거한 후에는 올바르게 스크롤됩니다. 내가 본 바로는 스크롤을 상쇄하고 요소만 이동하는 것이 아니라 전체 페이지를 이동하는 것 같습니다. 모두의 도움에 감사드립니다. 하지만 알아냈습니다.