순수 CSS 수동 슬라이딩 캐러셀(스크롤 막대 숨기기)

이 기사에서는 순수한 CSS 수동 슬라이딩 캐러셀(숨겨진 스크롤 막대)을 소개합니다. 이는 특정 참조 값을 가지고 있으며 도움이 필요한 친구에게 도움이 되기를 바랍니다.

HTML:

<p class="bigder">
　　<p class="big">

　　　　<dl>

　　　　　　<dt><img src="img/dongtai.png"/></dt>

　　　　</dl>

　　　　<dl>

　　　　　　<dt><img src="img/dongtai.png"/></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img src="img/dongtai.png"/></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img src="img/dongtai.png"/></dt>

　　　　</dl>　　　

　　　　<dl>

　　　　　　<dt><img src="img/dongtai.png"/></dt>

　　　　</dl>

　　</p>
</p>

CSS:

.bigder{width: 100%;margin: 0 auto;height: 195px;overflow: hidden;}
.big{overflow-x: scroll;height: 210px; display:flex;justify-content: space-between;}
.bigder dl{background-color: ghostwhite;text-align: center;margin-right: 20px;}
.bigder dl:last-child{padding-right: 0;}

사실 가로 캐러셀은 너비가 상위 항목을 초과하는 한 슬라이드할 수 있습니다. 가장 중요한 점은 스크롤 막대를 숨겨야 한다는 것입니다. 두 번째 레이어는 고정된 높이를 가져야 하며, 외부 레이어는 고정된 높이를 가져야 합니다. 레이어의 높이는 내부 레이어보다 약간 높고, 스크롤 막대는 맨 아래에 있으며, 가장 바깥쪽 레이어는 오버플로됩니다. 숨겨져 있습니다

비교 사진:

전:

, 후

:

실제로 몇 가지 간단한 방법이 있지만 C3를 지원하는 웹킷 기반 브라우저에만 해당됩니다:

　1):: -webkit-scrollbar {/*hide 스크롤 휠*/ display: none; }

　2)::-webkit-scrollbar {width:0px}

하지만 순수 CSS를 사용할 수 있다면 이러한 항목은 사용하지 않는 것이 가장 좋습니다.

또한 스크롤 막대 숨기기에 대해 이야기하고 있으므로 Ionic 숨겨진 스크롤 막대에 대해 더 자세히 살펴보겠습니다.

ion-content -scroll="true"에 오버플로를 추가하면 style="overflow:auto;"가 됩니다.

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면

CSS 비디오 튜토리얼을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 비디오 튜토리얼

CSS 온라인 매뉴얼

div/css 그래픽 튜토리얼

위 내용은 순수 CSS 수동 슬라이딩 캐러셀(스크롤 막대 숨기기)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!