> 웹 프론트엔드 > CSS 튜토리얼 > Mac용 Chrome에서 원치 않는 \'오버스크롤\'을 제거하는 방법은 무엇입니까?

Mac용 Chrome에서 원치 않는 \'오버스크롤\'을 제거하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-10-30 10:32:03
원래의
540명이 탐색했습니다.

How to Eliminate Unwanted

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

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

방법 1: 오버스크롤 제한

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

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

body {
    height: 100%;
    overflow: auto;
}
로그인 후 복사

오버플로: 요소는 오버플로 콘텐츠가 표시되는 것을 방지하여 뷰포트 내에서 페이지를 효과적으로 경계화합니다. 의 Overflow: auto 속성 요소는 페이지의 지정된 높이 내에서 자연스러운 스크롤을 허용하지만 오버스크롤을 제한합니다.

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

오버스크롤 동작을 사용자 정의하고 제어하려면 터치 동작 속성을 활용하세요.

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}
로그인 후 복사

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

위 내용은 Mac용 Chrome에서 원치 않는 \'오버스크롤\'을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿