CSS를 사용하여 스크롤바 위치를 바꾸는 방법은 무엇입니까?

CSS를 사용하여 스크롤 막대 위치 뒤집기

스크롤 막대 방향 변경

CSS는 스크롤 막대의 위치를 ​​왼쪽에서 오른쪽으로 또는 그 반대로 변경하는 직접적인 방법을 제공하지 않습니다. 그 반대. 그러나 간접적인 접근 방식을 사용하면 이를 달성할 수 있습니다.

오른쪽/왼쪽 뒤집기

스크롤 막대를 왼쪽에서 오른쪽으로 뒤집으려면:

1. Overflow-x: auto;로 래퍼 컨테이너를 정의합니다.
2. 폭을 초과하는 콘텐츠를 만듭니다. 컨테이너.
3. 사용 방향: rtl; 래퍼 컨테이너에서 스크롤 막대를 뒤집습니다.
4. 방향 재정의: ltr;

CSS:

<code class="css">.Container {
  height: 200px;
  overflow-x: auto;
}
.Content {
  height: 300px;
}

.Flipped {
  direction: rtl;
}
.Flipped .Content {
  direction: ltr;
}</code>

위/아래 뒤집기

마찬가지로 스크롤바를 아래에서 아래로 뒤집으려면 top:

1. overflow-y: auto;를 사용하여 래퍼 컨테이너를 정의합니다.
2. 컨테이너 높이를 초과하는 콘텐츠를 만듭니다.
3. transform:rotateX( 180도); 래퍼 컨테이너와 그 내용에 대해 스크롤 막대를 거꾸로 뒤집습니다.

CSS:

<code class="css">.Container {
  width: 200px;
  overflow-y: auto;
}
.Content {
  width: 300px;
}

.Flipped, .Flipped .Content {
  transform:rotateX(180deg);
  -ms-transform:rotateX(180deg); /* IE 9 */
  -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}</code>

위 내용은 CSS를 사용하여 스크롤바 위치를 바꾸는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!