페이지 위에 있는 요소의 오버플로로 스크롤할 수 없습니다.

Question

페이지 크기를 조정하면 요소가 표시 영역 위로 오버플로되어 위로 스크롤하여 볼 수 없습니다. 해결책이 있는 질문을 찾았지만 작동하지 않았습니다. 두 개의 "핵심" 보이지 않는 div와 모든 콘텐츠를 포함하는 하나의 div 요소가 있습니다.

이 문제를 해결하려고 하기 때문에 "컨테이너" div가 존재합니다.

.container {
   위치: 고정;
   상단: 0;
   왼쪽: 0;
   너비: 100%;
   높이: 100%;
   Z-색인: 500;
}

.메인 콘텐츠 {
   디스플레이: 플렉스;
   너비: 100%;
   높이: 100%;
   오버플로: 자동;
   여백: 자동;
}

.창문 {
   /*높이: 16vw;
   너비: 27vw;*/
   디스플레이: 플렉스;
   높이: 550px;
   너비: 800px;
   위치: 절대;
   최고: 50%;
   왼쪽: 50%;
   테두리: 파란색 5px;
   배경색: 검정색;
   여백: 자동;
   오버플로: 숨김;
}

  

    

      

        
        
내비게이션
      
    
  
 

Answer 1

이 문제의 유일한 해결책은 사용자 정의 스크롤바를 만드는 것입니다(이미지를 뷰포트 위에 배치해야 하는 경우)

귀하의 코드를 바탕으로 제가 만든 코드입니다

으아악 으아악 으아악

설명

기본적으로는 HTML과 CSS를 이용해 스크롤바를 만들어서 이미지의 가장 오른쪽에 배치했어요

HTML과 CSS를 이해할 수 있기를 바랍니다. 이제 JavaScript 부분을 살펴보겠습니다

먼저 마우스 좌표를 매핑합니다

으아악

함수를 호출하거나 정지 드래그 변수를 변경하는 이벤트 리스너를 만듭니다

으아악

그런 다음 startDrag() 함수를 만듭니다

으아악

이 함수에서는 사용자가 현재 스크롤 막대를 드래그하고 있기 때문에 먼저 stopdrag를 false로 설정합니다. 그런 다음 간격 루프 코드를 설정합니다. 좌표에 따르면 mouse.y는 대부분 시행착오를 겪습니다. 한도 내에 있는지 확인하고, 그렇다면 재배치합니다. 그런 다음 드래그하는 동안 스크롤 막대의 상단 위치를 변경합니다(계산은 시행착오입니다). 그런 다음 창 클래스 div의 아래쪽 위치를 변경하여 창 클래스 div의 위치를 ​​변경합니다(이미지 자체는 위치를 변경할 수 없기 때문입니다. 전체 창 클래스 div를 이동하지 않으려면 그 위에 다른 컨테이너를 만들 수 있습니다). 그것을 보려면 드래그가 멈추면 간격이 지워집니다

Answer 2

이 문제를 해결해 주신 @TylerH에게 감사드립니다. 문제는 내 HTML의 변환 스타일에 있습니다. 제거한 후에는 올바르게 스크롤됩니다. 내가 본 바로는 스크롤을 상쇄하고 요소만 이동하는 것이 아니라 전체 페이지를 이동하는 것 같습니다. 모두의 도움에 감사드립니다. 하지만 알아냈습니다.