모바일 오버플로 : 자동 스크롤 바가 숨겨져 있습니다. 이유는 무엇이며 어떻게 해결해야합니까?

모바일 CSS 스크롤 막대는 문제를 숨 깁니다 : 원인과 솔루션

모바일 개발에서 스크롤 막대의 디스플레이 및 은신처는 종종 두통입니다. 이 기사는 일반적인 사례를 분석합니다. overflow: auto 인해 스크롤 막대가 모바일 측면에 자동으로 숨겨지지 않아 효과적인 솔루션을 제공합니다.

문제 설명 :

모바일 브라우저에서 내부 DIV 세트 overflow: auto 으로 중첩 된 div 구조가 설정되며 스크롤링이 완료된 후 스크롤 막대가 자동으로 숨겨 질 것으로 예상됩니다. 그러나 실제 상황은 다음과 같습니다. 스크롤 막대는 첫 번째 스크롤 후에 정상적으로 숨겨져 있지만 두 번째 스크롤 후에는 항상 표시되며 자동으로 사라질 수 없습니다. 더 수수께끼는 외부 Div의 border-radius 속성을 제거한 후 문제가 사라진다는 것입니다.

Code example:

<div id="f" style="background:red;height:300px;width:100%;overflow:hidden;border-radius: 10px;">
    <div id="b" style="background:red;height:100%;width:100%;overflow:auto">
      <div id="c" style="background:rgb(188, 193, 194);height:100%;width:300%;">
        <p>많은 텍스트 내용 ...</p>
      </div>
    </div>
  </div>

문제 분석 및 해결책 :

문제의 근본 원인은 외부 div (id is f)의 border-radius 속성과 overflow: auto 내부 div (id is b) 사이의 충돌에 있습니다. border-radius 렌더링 문제를 일으켜 스크롤 바의 숨겨진 메커니즘에 영향을 미칩니다.

더 나은 솔루션 :

외부 div에서 border-radius 제거하는 대신, 더 나은 접근 방식은 내부 Div (IS IS B)에 border-radius 적용하고 overflow: hidden 속성을 제거하는 것입니다. 이것은 외부 div의 둥근 코너 효과를 유지할뿐만 아니라 스크롤 막대 숨기기의 문제를 해결합니다.

수정 된 코드는 다음과 같습니다.

<div id="f" style="background:red;height:300px;width:100%;border-radius: 10px;">
    <div id="b" style="background:red;height:100%;width:100%;overflow:auto; border-radius: 10px;">
      <div id="c" style="background:rgb(188, 193, 194);height:100%;width:300%;">
        <p>많은 텍스트 내용 ...</p>
      </div>
    </div>
  </div>

위의 조정을 통해 스크롤링이 완료된 후에는 모바일 측면의 스크롤 막대를 정상적으로 숨길 수 있으며 스타일 손실을 피하면서 외부 디바이의 둥근 코너 스타일을 유지합니다.

위 내용은 모바일 오버플로 : 자동 스크롤 바가 숨겨져 있습니다. 이유는 무엇이며 어떻게 해결해야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!