다른 브라우저에서 보이는 스크롤 막대 없이 스크롤 가능한 Div를 만드는 방법은 무엇입니까?

다른 브라우저에서 보이는 스크롤바 없이 스크롤 가능한 Div 만들기

제공되는 Webkit 솔루션 외에도 다른 브라우저에서도 동일한 효과를 얻을 수 있습니다 영리한 CSS 기술을 사용하여. 방법은 다음과 같습니다.

CSS 솔루션:

1. 스크롤 가능한 div를 다른 div 안에 넣습니다.

<code class="html"><div id="outer-div">
  <div id="inner-div" style="overflow: auto;">
    <!-- Your scrollable content goes here -->
  </div>
</div></code>

2. 스크롤 막대를 숨기려면 외부 div에 오버플로: 숨김을 설정하세요.

<code class="css">#outer-div {
  overflow: hidden;
}</code>

3. 스크롤을 허용하려면 내부 div에 오버플로: 자동을 설정하세요.

<code class="css">#inner-div {
  overflow: auto;
}</code>

작동 방식:

외부 div 내의 스크롤 가능한 div를overflow:hidden으로 래핑하면 본질적으로 외부 div 내의 스크롤 막대를 "트랩"하여 보이지 않게 만듭니다. 내부 div는 외부 div의 제한 사항에 의해 제한되는 동안 실제 스크롤을 처리합니다.

예:

https://jsfiddle.net/qqPcb에서 이 예를 확인하세요. / 작업 시연용.

참고:

이 기술은 스크롤 막대를 숨기기 위한 보다 포괄적인 솔루션을 제공하는 인기 있는 jQuery 플러그인인 jScrollPane에서도 사용됩니다.

위 내용은 다른 브라우저에서 보이는 스크롤 막대 없이 스크롤 가능한 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!