웹 페이지의 '오버스크롤' 극복

Mac용 Chrome에서 '오버스크롤'은 사용자가 페이지를 일반 보기 영역 밖으로 드래그할 수 있게 하는 바람직하지 않은 효과입니다. 제공된 이미지에서 볼 수 있듯이. 이 문제를 해결하고 사용자 경험을 개선하려면 다음 두 가지 방법을 고려하십시오.

방법 1: 오버스크롤 제한

오버스크롤을 완전히 비활성화하려면 다음 CSS 코드를 사용하십시오.

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

요소의 오버플로: 숨겨진 속성은 오버플로 콘텐츠가 표시되는 것을 방지하여 뷰포트 내에서 페이지를 효과적으로 경계화합니다.

방법 2: 오버스크롤 동작 사용자 정의

오버스크롤 동작을 사용자 정의하고 제어하려면 터치 액션 속성:

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}

위의 코드는 페이지에 정의된 높이 내에서 스크롤하는 것을 포함하여 일반적인 터치 조작을 허용하면서 텍스트 선택을 방지합니다. 보다 세부적인 제어를 위해 가로 스크롤만 허용하는 pan-x와 같은 정확한 터치 동작 값을 지정할 수 있습니다.