스크롤 막대는 이동 가능한 막대로, 일반적으로 화면 맨 오른쪽이나 하단에 위치합니다. 스크롤 막대는 수평 또는 수직으로 장착되어 사용자가 창을 위아래로 또는 오른쪽과 왼쪽으로 이동할 수 있습니다. 즉, 스크롤바는 연속된 그림이나 텍스트 또는 모든 종류의 디스플레이를 스크롤하는 시스템 창 디스플레이와 사용자 사이의 상호 작용을 생성하는 위젯 또는 기술입니다. 스크롤 막대에는 일반적으로 'TRACK'이라고 알려진 'BAR'이 포함되어 있으며, 이 막대에는 창 내용을 위아래 또는 오른쪽과 왼쪽으로 이동하는 데 사용되는 'THUMB'이 있습니다. 이번 주제에서는 스크롤바 색상에 대해 알아보겠습니다.
일반적으로 발견되는 스크롤 막대는 일반적으로 블록 모양이며 회색입니다. 그러나 스크롤 막대의 기본 색상과 기타 속성은 CSS나 JavaScript 또는 둘 다를 사용하여 조작하고 사용자 정의할 수 있습니다.
다음 섹션에서는 CSS와 Javascript를 사용하여 조작된 스크롤 막대를 만들어 보겠습니다.
색상 속성은 '엄지 손가락'의 기본 회색과 일반적인 트랙 색상 외에 다른 색상을 설정하는 데 도움이 됩니다. 우리 모두는 스크롤 막대의 배경 영역 색상(일반적으로 사용자가 스크롤하는 방향에 관계없이 고정됨)을 'TRACK'이라고 알고 있습니다. 그리고 실제로 스크롤 창과 함께 스크롤되면서 트랙 위에 떠다니는 움직이는 부분을 'THUMB'이라고 합니다.
아래는 트랙과 썸을 설명하는 시각적 예시 그림입니다.
위 이미지는 정보가 넘쳐나는 웹페이지를 단순하게 표현한 것입니다. 전체 정보를 보려면 사용자가 엄지 손가락을 클릭하고 위아래로 드래그해야 합니다.
위 이미지에 보이는 스크롤바는 기본 브라우저 기반의 스크롤바이며 기본값이 있습니다. 우리는 기본값에 대해 계속해서 이야기하고 있습니다. 그것도 봅시다.
<스크롤바 색상> 속성 단점은 제한적이며 특정 버전 이상의 브라우저에서만 지원됩니다. 예를 들어 이 속성은 Chrome 버전 81 이상, Firefox 72 이상 등에서 지원됩니다. 이를 방지하기 위해 '-webkit-' 속성이라는 또 다른 속성을 사용합니다.
Opera, Chrome, Safari와 같은 브라우저는 -webkit- 브라우저이므로 ":: -webkit-scrollbar" 요소라는 비표준 의사 요소를 지원하므로 스크롤 막대를 쉽게 변경할 수 있습니다. 브라우저에 상관없이요.
속성은 기본적으로 '자동'으로 설정되어 있으며, 이를 조작하면 정말 흥미로운 시각적 효과를 만들 수 있습니다. 이러한 요소는 코드 상단(아래 참조)의
섹션을 사용하여 브라우저의 기본 스크롤 막대 속성을 사용자 정의하세요.다음은 너비가 18픽셀인 간단한 스크롤 막대의 예를 만들었습니다. 나뭇잎이 많은 녹색 막대 또는 손잡이 색상으로 노란색 압정 색상을 지정했습니다.
<style>
/* width */
::-webkit-scrollbar {
width: 18px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
}
</style>막대 또는 핸들에 '::-webkit-scrollbar-thumb:hover' 속성을 하나 더 추가할 수 있습니다. 이 속성은 스크롤 막대 위에 마우스를 올렸을 때 다른 색상을 설정하는 데 도움이 됩니다.
바 또는 핸들에 '마우스오버' 속성을 추가하려면 스크립트에 다음 코드 줄을 추가하기만 하면 됩니다.
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}아래 스크린샷에서 결과를 볼 수 있습니다.
잎이 많은 녹색 색상의 막대 위에 마우스를 올리면 갈색으로 변경됩니다.
더 많은 부동산을 탐색하는 또 다른 예를 살펴보겠습니다. 다음 예에서는 테두리 반경 속성을 사용하여 막대와 썸을 부드럽게 만들었습니다. 흥미로운 점은 사용자가 막대를 드래그하는 대신 버튼을 클릭하여 트랙에서 막대를 쉽게 이동할 수 있도록 버튼을 만드는 것입니다.
사용자 정의 버튼을 생성하기 위해 아래 코드를 추가했습니다.
/* Custom Button */
::-webkit-scrollbar-button:single-button {
background-color:none;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}The above will simply display the area with a border where our buttons will appear, as shown below. This will need some customization as well.
After our customization (see the code added) is done, we get the final result. See the results for yourselves:
Complete code is given below:
<head>
<style>
/* Custom width for the Scrollbar */
::-webkit-scrollbar {
width: 18px;
}
/* Custom Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
background: #f1f120;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #881;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #520;
}
/* Custom Button */
::-webkit-scrollbar-button:single-button {
background-color:none;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
/* Custom Up Direction Button */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0px 8px 9px 8px;
border-color: transparent #881;
border-radius: 10px;
}
/* Custom Down Direction Button */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 0px 8px 9px 8px;
border-color: transparent #881;
border-radius: 10px;
}
</style>
</head>There is always another way to implement elements in your project. A custom scroll bar can also be added with the help of jquery plugins and javascript libraries, popular in the web market. For example, SimpleBar is the new Javascript library that makes it easier for the author to create customized scrollbars.
It’s a standalone library that adds a scroll bar to any scrollable element or component, or container which might have overflowing content. This javascript library makes your content dynamic and keeps the native scroll behavior. A simple demo is shown below.
You can easily use these javascript libraries by installing and importing them into your projects or directly including them and their CSS files (if any) on to your HTML page. In the below example, we will be using the second option, directly including a javascript library into our program.
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <strong> </strong><script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>
Adding these two lines to your HTML page will include and attach a remote file that can not be edited to your HTML like this; 
Next, we will add, ‘data-simplebar’ attribute to the division or the content, which will be the scrollable container of your HTML page. In our example, we added this attribute to the
But it’s still raw and a bit ugly. I have done a few tweaks, as shown below, and see the results for your selves. The full code for CSS is given below, along with the results.
<style>
:root { --primary: #212123;
}
body, html{ height: 100vh;
}
body{ background: var(--primary);
font-family:Georgia, "Times New Roman", Times, serif;
color: #fff;
display:grid;
grid-columns:60% auto;
margin: 0;
}
p{ margin: 1em;
padding: 1em;
background-color: #333;
border-radius:10px;
color: #99F;
}
h2 { color: #996;
}
.simplebar-scrollbar:before{background-color:#0F0;
}
.simplebar-scrollbar{margin-right:3px;
}
</style>And the result is, as you can see below;
You can manually configure the javascript libraries as well, but then you need to initialize them first and then configure them; an option is known as ‘override’ is used, passing the object as a parameter of our Simplebar Function.
You can design it as you want since this library is lightweight. It has a simplebar.js file, a vanilla javascript custom scroll bar plugin that ensures great performance and works with all browsers.
위 내용은 스크롤바 색상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
