CSS로 스크롤바 스타일을 수정하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

CSS로 스크롤바 스타일을 수정하는 방법

PHPz

Apr 24, 2023 am 09:08 AM

최근에는 인터넷의 발전과 함께 사용자 경험에 주목하는 웹사이트가 점점 많아지고 있는데, 작지만 중요한 디테일 중 하나가 바로 스크롤바 스타일입니다. 전통적인 스크롤 막대는 아름답지 않으며 일반적으로 브라우저와 함께 제공되는 기본 스타일만 가지며 사용자 정의할 수 없습니다. 그러나 CSS를 수정하면 스크롤 막대의 스타일을 쉽게 수정하여 웹 사이트의 전체 스타일과 더욱 일관되게 만들 수 있습니다.

우선 스크롤바의 특성을 이해해야 합니다. 스크롤 막대는 실제로 슬라이더와 스크롤 막대 트랙의 두 부분으로 구성된 요소입니다. 슬라이더는 현재 위치를 식별하는 데 사용되는 반면 스크롤 막대 트랙은 해당 위치의 전체 막대 요소를 나타냅니다. 따라서 스크롤 막대 스타일을 수정하려면 이 두 부분을 별도로 처리해야 합니다.

1. 슬라이더 스타일 수정

슬라이더 스타일을 수정하려면 "::-webkit-scrollbar-thumb" 의사 클래스 선택기를 사용할 수 있습니다. 이 의사 클래스 선택기는 Chrome, Safari 등과 같은 Webkit 코어가 있는 브라우저에만 유효합니다.

코드는 다음과 같습니다.

::-webkit-scrollbar-thumb {
    background-color: #8B8B8B;
    border-radius: 10px;
}

로그인 후 복사

위 코드는 슬라이더의 배경색을 회색으로 설정하고 슬라이더의 모서리를 둥근 모서리로 설정한다는 의미입니다.

동시에 너비 및 높이 설정과 같이 슬라이더에 다른 사용자 정의 스타일을 수정할 수도 있습니다.

::-webkit-scrollbar-thumb {
    background-color: #8B8B8B;
    border-radius: 10px;
    width: 10px;
    height: 50px;
}

로그인 후 복사

2. 스크롤 막대 트랙의 스타일 수정

스크롤 막대의 스타일을 수정하려면 트랙을 사용하려면 이 가상 클래스 선택기를 "::-webkit-scrollbar-track"으로 사용할 수 있습니다.

코드는 다음과 같습니다.

::-webkit-scrollbar-track {
    background-color: #F0F0F0;
    border-radius: 10px;
}

로그인 후 복사

위 코드는 스크롤 바 트랙의 배경색을 밝은 회색으로 설정하고 스크롤 바 트랙의 모서리를 둥근 모서리로 설정한다는 의미입니다.

마찬가지로 높이 및 너비 설정과 같이 스크롤 막대 트랙에 다른 사용자 정의 스타일을 수정할 수도 있습니다.

::-webkit-scrollbar-track {
    background-color: #F0F0F0;
    border-radius: 10px;
    width: 20px;
    height: 200px;
}

로그인 후 복사

참고: 수정하려는 웹페이지가 Firefox 및 IE와 같은 Webkit이 아닌 브라우저를 사용하는 경우 , 위 코드는 적용되지 않습니다. 따라서 브라우저 간 스크롤 막대 스타일을 수정하려면 몇 가지 다른 기술도 사용해야 합니다.

3. 브라우저 간 스크롤 막대 스타일 수정 구현

브라우저 간 스크롤 막대 스타일 수정을 구현하기 위해 타사 js 라이브러리인 "완벽한 스크롤 막대"를 사용할 수 있습니다. 이 라이브러리는 완전히 사용자 정의 가능한 스크롤 막대 수정을 허용하고 Chrome, Firefox, Safari 등을 포함하여 널리 사용되는 모든 브라우저를 지원합니다.

먼저 태그에 "perfect-scrollbar.css"와 "perfect-scrollbar.min.js" 두 파일을 삽입해야 합니다.

<head>
  <link rel="stylesheet" type="text/css" href="path/to/perfect-scrollbar.css">
  <script src="path/to/perfect-scrollbar.min.js"></script>
</head>

로그인 후 복사

그런 다음 스타일을 수정해야 하는 영역에 컨테이너 div를 추가하고 여기에 스타일 클래스 이름이 "ps"인 클래스를 추가합니다.

<div class="ps">
  <p>这是需要滚动条的区域</p>
</div>

로그인 후 복사

다음으로 js에서 "new PerfectScrollbar('.ps')" 문을 통해 컨테이너를 초기화합니다.

<script>
   new PerfectScrollbar('.ps');
</script>

로그인 후 복사

마지막으로 CSS에 해당 스타일을 추가하여 스크롤 막대를 사용자 정의할 수 있습니다.

.ps {
  height: 200px;
  overflow: auto;
}
.ps__rail-x {
  background-color: #eee;
  bottom: 3px;
  height: 10px;
}
.ps__rail-y {
  background-color: #eee;
  width: 10px;
  right: 3px
}
.ps__thumb-x {
  background-color: #a1a1a1;
  border-radius: 6px;
}
.ps__thumb-y {
  background-color: #a1a1a1;
  border-radius: 6px;
  width: 6px;
}

로그인 후 복사

위 코드에서 ".ps"는 컨테이너 div의 스타일 클래스 이름이며 높이, 너비 및 기타 크기 스타일을 설정할 수 있습니다. "__rail-x" 및 "__rail-y"는 각각 스크롤 막대 트랙의 x 및 y 방향에 해당하며 스크롤 막대 트랙의 스타일을 설정하는 데 사용됩니다. "__thumb-x" 및 "__thumb-y"는 각각 슬라이더의 x 방향과 y 방향에 해당하며 슬라이더의 스타일을 설정하는 데 사용됩니다.

위 과정을 통해 이미 다양한 브라우저에서 스크롤 막대 스타일을 수정할 수 있습니다. CSS 의사 클래스 선택기를 사용하든 타사 라이브러리를 사용하든 스크롤 막대의 스타일을 쉽게 수정하고 웹 사이트의 전반적인 경험을 향상시킬 수 있습니다.

위 내용은 CSS로 스크롤바 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.