최  호민

최 호민

1656914129

CSS 튜토리얼 | CSS로 사용자 정의 스크롤바 만들기

CSS에서 사용자 정의 스크롤바를 만들기 위한 궁극적인 가이드

스크롤바에 대해 알아보고 CSS를 사용하여 웹사이트에 대한 사용자 정의 스크롤바를 만드십시오. 이것은 당신을 위한 완전한 가이드입니다. 브라우저 지원, 효과 등이 포함됩니다.

때때로 우리 는 우리 웹사이트가 경쟁에서 눈에 띄도록 CSS로 사용자 정의 스크롤바를 만들고 싶을 때가 있습니다. 하지만 스크롤바의 스타일을 지정하는 것은 조금 복잡해 보입니다. 사용자 정의 스크롤바를 만드는 동안 프로세스에서 몇 가지 문제에 직면해야 하기 때문입니다.

이 기사에서는 순수 CSS를 사용하여 웹 사이트에 대한 사용자 정의 스크롤바를 만드는 방법을 보여 드리겠습니다. 나는 당신이 직면할 수 있는 모든 합병증과 그것을 해결할 수 있는 방법에 대해 논의할 것입니다.

웹사이트 스크롤바의 스타일을 지정하는 동안 직면하게 될 몇 가지 주요 문제가 있습니다.

  • 스크롤바를 쉽게 선택할 수 없습니다.
  • 다양한 유형의 스크롤바가 있습니다.
  • 모든 브라우저는 동일한 CSS 선택기를 지원하지 않습니다.
  • 브라우저마다 스크롤 막대가 다른 스타일로 표시됩니다.
  • 때때로 스크롤바가 예상치 못한 위치에 나타납니다.
  • 몇 가지 모범 사례를 따르지 않으면 사용자 경험을 방해할 수 있습니다.

이 기사에서 논의할 더 많은 문제가 있습니다. 이러한 장애물 때문에 우리는 종종 스크롤바의 스타일을 지정하고 싶지 않습니다.

브라우저의 기본 스크롤바는 괜찮습니다. 사용자 정의 디자인 스크롤바를 생성해야 하는 것은 의무 사항이 아닙니다. 내가 말하고 싶은 것은 당신이 원한다면 할 수 있다는 것입니다.

CSS에서 사용자 정의 스크롤바를 어떻게 만듭니까?

먼저 스크롤바의 다른 부분을 알아야 합니다. 다른 부분을 따로 스타일링해야 하기 때문입니다.

여러 브라우저를 지원하기 위해 스타일에 두 세트를 추가합니다. Firefox의 스크롤 막대 스타일은 다른 브라우저와 다르기 때문입니다.

필요할 때 스크롤바를 표시할 수도 있습니다. 그렇지 않으면 웹 사이트 사용자에게 더 많은 공간을 제공하기 위해 숨길 수 있습니다.

마지막으로 스크롤바가 사용자 경험을 향상시킬 수 있도록 몇 가지 좋은 기술을 따라야 합니다.

스크롤바의 종류(수직/수평)

웹 페이지에서 볼 수 있는 스크롤바에는 두 가지 유형이 있습니다.

  • 수직 스크롤바.
  • 수평 스크롤바.

일반적으로 가로 스크롤 막대는 특정 섹션에서 사용됩니다. 예를 들어 게시물 목록을 표시하려는 경우 가로로 표시할 수 있습니다. 많은 수의 블로그 게시물을 세로로 표시하면 엄청난 공간을 차지할 수 있고 사용자가 오랜 시간 동안 스크롤해야 하기 때문입니다.

이 문제를 해결하기 위해 해당 게시물을 가로로 표시할 수 있으며 콘텐츠가 사용자 장치의 사용 가능한 공간을 넘을 때 브라우저에서 가로 스크롤 막대를 추가합니다.

그리고 우리 모두는 수직 스크롤바에 대해 알고 있습니다. 거의 모든 웹 페이지의 오른쪽에 나타납니다.

특정 섹션에서 수직 스크롤바를 사용할 수도 있습니다. 예를 들어height 페이지의 섹션에 고정을 설정 하고 추가 overflow: auto;하면 해당 섹션 내부의 콘텐츠가 고정 높이보다 크면 브라우저에 수직 스크롤바가 표시됩니다.

스크롤바 구성요소

웹 페이지에서 스크롤바를 볼 때 몇 가지 부분이 보입니다. 수직 스크롤바에는 위아래로 두 개의 화살표 버튼 이 있습니다 . 수평 스크롤바에는 좌우 2개의 화살표 버튼 도 있습니다 .

웹 페이지 스크롤바의 모든 구성 요소 표시

이 버튼 외에 두 가지 다른 구성 요소가 있습니다. 하나는 thumb다른 하나입니다 thack.

  • 스크롤바 트랙.
  • 스크롤바 엄지.
  • 화살표 버튼(위 및 아래/왼쪽 및 오른쪽).

thumb페이지에서 우리가 이동하고 있는 위치를 보여줄 수 있는 부분입니다 .

반면에 track엄지손가락의 배경이 되는 엄지손가락 뒤에 있는 부분입니다. 트랙 내부에서 엄지손가락을 움직입니다.

이 기사에서 이러한 모든 구성 요소를 사용자 정의합니다.

Chrome, Edge 및 Safari에서 사용자 지정 스크롤 막대 만들기

앞서 말했듯이 모든 브라우저를 지원하려면 두 가지 스타일 세트를 추가해야 합니다. 먼저 Firefox 이외의 브라우저에서 스크롤바를 사용자 정의하는 방법을 보여 드리겠습니다.

다음 섹션에서는 Firefox에서만 작동하는 스타일을 볼 수 있습니다.

화살표 버튼을 표시하지 않고 Chrome 브라우저에서 스크롤바 사용자 정의

가로 및 세로 스크롤 막대의 스타일을 함께 지정할 수 있습니다. 동일한 스타일이 둘 다에 적용됩니다.

그러나 가로 및 세로에 대해 다른 스타일이 필요한 경우에도 그렇게 할 수 있습니다.

스타일을 지정하려면 두 스크롤 막대를 함께 스타일시트에 다음 코드를 추가합니다.

::-webkit-scrollbar {
    width: 1.4vw;
    height: 3.3vh;
}

::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 10px;
    margin-top: 3px;
    margin-bottom: 3px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #f90;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ec8f02;
}

여기에서 스크롤 막대에 스타일을 추가하기 위해 3개의 의사 요소를 사용했습니다.

  • ::-webkit-scrollbar– 전체 스크롤바에 영향을 줍니다.
  • ::-webkit-scrollbar-thumb– 이동할 수 있는 드래그 가능한 스크롤 핸들에 영향을 줍니다.
  • ::-webkit-scrollbar-track– 스크롤 핸들을 움직이는 공간에 영향을 줍니다.

::-webkit-scrollbar전체 스크롤 막대에 대해 작동하는 경우 다른 두 가지를 사용하는 이유를 생각할 수 있습니다 . 문제는 모든 CSS 속성이 ::-webkit-scrollbar요소 내부에서 작동하지 않는다는 것입니다.

예를 들어 속성이 요소 내부에서 작동하지 않기 때문에 속성 을 사용 border-radius했습니다 .::-webkit-scrollbar-trackborder-radius::-webkit-scrollbar

여기에서 margin-topmargin-bottom내부의 속성 은 세로 스크롤 막대에서만 작동하며 및 ::-webkit-scrollbar-track를 추가하면 이러한 속성은 가로 스크롤 막대에서만 작동합니다.margin-leftmargin-right

전체 스크롤 막대에 이것이 필요하기 때문에 내부 widthheight속성 을 설정 했습니다.::-webkit-scrollbar

너비와 높이를 동시에 사용하는 이유는 무엇입니까?

width속성은 세로 스크롤 막대에서만 작동하고 속성 height은 가로 스크롤 막대에서만 작동합니다.

설정 width하면 세로 스크롤 막대 height의 크기가 증가하고 가로 스크롤 막대의 크기가 증가합니다.

및 속성에 대해 각각 뷰포트 너비(vw)뷰포트 높이(vh) CSS 단위를 사용 했습니다. 여기에서 픽셀(px) 단위 를 사용하면 웹 페이지를 확대하거나 축소할 때 스크롤 막대 크기가 증가하거나 감소하기 때문입니다.widthheight

나는 그것을 원하지 않는다. 사용자가 내 웹 페이지를 확대하거나 축소할 때 크기가 변경되지 않도록 내 페이지에 고정 크기 스크롤 막대가 필요합니다.

스타일 수평 스크롤바

위의 코드는 두 가지 유형의 스크롤바에 스타일을 추가합니다. 수평 스크롤바만 사용자 정의하려는 경우 이것이 적합한 솔루션입니다.

일반적으로 가로 스크롤바는 특정 섹션에 추가됩니다. CSS class또는 id해당 유사 요소와 함께 해당 섹션의 스타일을 사용하여 해당 섹션에만 스타일을 적용할 수 있습니다.

예를 들어 수평 스크롤 막대를 표시하는 섹션에 .products클래스가 있는 경우 다음과 같이 해당 섹션을 선택할 수 있습니다.

  • .products::-webkit-scrollbar
  • .products::-webkit-scrollbar-track
  • .products::-webkit-scrollbar-thumb

다른 모든 것은 동일합니다. 앞에서 언급한 것과 같은 방식으로 CSS 속성을 사용할 수 있습니다.

차이점은 이 시간 스타일은 .products클래스 섹션의 스크롤 막대에만 적용된다는 것입니다.

스타일 수직 스크롤바

마찬가지로 웹 페이지의 기본 세로 스크롤 막대를 사용자 지정하려는 경우 이러한 유사 요소와 함께 body또는 태그를 사용할 수 있습니다.html

  • body::-webkit-scrollbar
  • body::-webkit-scrollbar-track
  • body::-webkit-scrollbar-thumb

또는

  • html::-webkit-scrollbar
  • html::-webkit-scrollbar-track
  • html::-webkit-scrollbar-thumb

둘 다 비슷한 방식으로 작동합니다. 이 방법을 사용하면 웹 페이지의 다른 스크롤 막대가 아닌 기본 세로 스크롤 막대에만 스타일이 적용됩니다.

스크롤 막대에서 화살표 버튼을 사용자 정의하는 방법

위의 코드를 스타일시트에 추가하면 화살표 버튼이 없음을 알 수 있습니다. 이러한 버튼을 사용하고 싶지 않다면 첫 번째 예제가 적합할 것입니다.

그러나 사용자 정의 스크롤 막대에 화살표 버튼을 포함하려면 아래에 언급된 코드를 사용할 수 있습니다.

::-webkit-scrollbar {
    width: 1.4vw;
    height: 3.3vh;
}

::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background-color: #f90;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ec8f02;
}

이 예에서는 첫 번째 스타일에서 일부 스타일을 변경했습니다. 이 코드는 기본 스크롤바를 사용자 정의합니다. 이것은 스크롤바의 기본 스타일입니다.

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #ece4e4;
    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-button:single-button:hover {
    background-color: #d0cbcb;
}

위의 코드는 버튼의 기본 스타일을 설정합니다. 여기에서 background 와 같은 일반적인 스타일을 추가할 수 있습니다 .

::-webkit-scrollbar-button화살표 버튼에 스타일을 추가하려면 다른 의사 클래스와 함께 의사 요소 를 사용해야 합니다.

  • :single-button
  • :horizontal
  • :vertical
  • :decrement
  • :increment

이제 화살표 버튼을 사용자 정의하겠습니다.

화살표 버튼을 사용하여 Chrome 브라우저에서 스크롤바 사용자 정의

수평 스크롤바의 스타일 화살표 버튼

:horizontal수평 스크롤바에서 화살표 버튼의 스타일을 지정하려면 의사 클래스 를 사용해야 합니다 .

이제 수평 스크롤바의 왼쪽 화살표 버튼 에 스타일을 추가 하려면 의사 클래스 :decrement와 함께 사용해야 합니다 .:horizontal

그런 다음 오른쪽 화살표 버튼 의 경우 의사 클래스 :increment와 함께 사용할 수 있습니다 .:horizontal

여기에서 각 버튼에 대해 width, height, background-positionbackground-imageCSS 속성을 설정합니다.

SVG 아이콘을 배경 이미지로 추가했습니다.

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    height: 12px;
    width: 15px;
    background-position: 4px 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    height: 12px;
    width: 15px;
    background-position: 5px 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
}

세로 스크롤 막대의 스타일 화살표 버튼

수직 스크롤 막대 화살표 버튼의 경우 :vertical의사 클래스를 사용하여 사용자 정의 스타일을 추가해야 합니다.

두 개의 다른 의사 클래스가 사용 :decrement되며 :increment각각 위 및 아래 화살표 버튼:vertical 에 사용 됩니다.

이 경우 SVG 아이콘 및 기타 CSS 속성을 추가할 수도 있습니다.

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 14px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 14px;
    width: 16px;
    background-position: center 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}

Firefox에서 사용자 정의 스크롤 막대 만들기

Firefox에서 사용자 정의를 위해 제한된 옵션이 있습니다. Firefox는 스크롤 막대에 사용자 정의 스타일을 추가하기 위해 두 가지 CSS 속성을 지원합니다.

  • scrollbar-width– 이 속성을 사용하면 스크롤 막대의 너비 또는 두께를 설정할 수 있습니다. auto, thin 및 none의 세 가지 값을 허용합니다 . 여기에서 autothin기본값이며 스크롤 막대를 기본값보다 얇게 만들고 none웹 페이지에서 스크롤 막대를 제거합니다.
  • scrollbar-color– 이 속성을 사용하면 스크롤 막대의 썸 및 트랙 색상을 설정할 수 있습니다. auto그 가치로 받아들 입니다. auto기본값입니다. 그러나 빨강, 파랑 등과 같은 두 가지 유효한 색상 이름을 전달하거나 #FC9901, #F5F5F5와 같은 두 가지 색상 코드를 전달할 수 있습니다.

속성 에서 scrollbar-color첫 번째 색상 이름 또는 색상 코드는 이동할 수 있는 스크롤 막대의 썸에 적용됩니다. 두 번째 색상 이름 또는 색상 코드는 엄지손가락을 움직이는 스크롤바의 트랙에 적용됩니다.

참고: 이 두 속성을 사용할 때마다 루트 요소에서 사용해야 합니다.

scrollbar-width가 thin으로 설정된 경우 Firefox 브라우저에서 웹 페이지 스크롤 막대 표시

두 가지 방법으로 스크롤바에 스타일을 추가할 수 있다는 것을 이미 알고 있습니다. 첫째, 페이지의 모든 스크롤바에 적용될 전역 범위에서. 둘째, 페이지의 특정 섹션에 스타일을 추가합니다.

이것을 전역 범위에 추가하려면 아래 코드를 따르십시오.

* {
    scrollbar-width: thin;
    scrollbar-color: #f90 #f5f5f5;;
}

여기에서 내가 선택 *하는 것은 모든 것을 의미합니다. 다음을 사용하여 이러한 속성을 적용하면 *모든 스크롤바에 대해 제대로 작동합니다.

html또는 대신 사용하려고 했지만 body제대로 작동하지 않습니다. 내가 사용했을 때 모든 스크롤 막대에서 작동하지만 html세로 스크롤 막대에서만 작동합니다.scrollbar-colorscrollbar-width

html {
    scrollbar-width: thin;
    scrollbar-color: #f90 #f5f5f5;
}

세로 스크롤 막대를 사용할 때 body효과가 없고 가로 스크롤 막대에서는 scrollbar-color작동하지만 scrollbar-width속성은 작동하지 않습니다. *따라서 전역 범위에 대한 선택기 와 함께 이러한 속성을 사용하는 것이 가장 좋습니다 .

body {
    scrollbar-width: thin;
    scrollbar-color: #f90 #f5f5f5;
}

특정 섹션에 사용하려면 해당 섹션의 루트 요소에 넣어야 합니다.

루트 요소는 무엇을 의미합니까?

제품 목록을 표시하는 섹션이 있고 이 섹션에서 스크롤 막대에 스타일을 적용하려고 합니다. 이 섹션 의 경우 모든 제품이 있는 요소의 경우 이러한 속성을 해당 요소에 적용해야 합니다.

<div class="products">
    <div class="single-product">
        <div class="accomodation_item text-center">
            <div class="hotel_img">
                <img src="image/room1.jpg" alt="">
                <a href="#" class="btn theme_btn button_hover">Book Now</a>
            </div>
            <a href="#">
                <h4 class="sec_h4">Double Deluxe Room</h4>
            </a>
        </div>
    </div>
    <div class="single-product">
        <div class="accomodation_item text-center">
            <div class="hotel_img">
                <img src="image/room1.jpg" alt="">
                <a href="#" class="btn theme_btn button_hover">Book Now</a>
            </div>
            <a href="#">
                <h4 class="sec_h4">Double Deluxe Room</h4>
            </a>
        </div>
    </div>
</div>

위의 예에서 모든 제품이 div의 클래스가 있는 내부에 있음을 볼 .products수 있으므로 스크롤 막대에 스타일을 추가하려면 이 클래스에 해당 CSS 속성을 추가해야 합니다.

.products {
    width: 300px;
    height: 100px;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: #f90 #f5f5f5;
}

속성 을 설정 thin하면 scrollbar-width화살표 버튼이 제거되고 스크롤 막대가 매우 얇아집니다. 사용하기가 매우 어려워집니다.

그러나 속성을 사용 scrollbar-color하지 않고 속성을 사용 scrollbar-width하면 색상과 함께 기본 두께를 얻습니다. 더 보기 좋고 더 나은 사용자 경험을 제공한다고 생각합니다.

scrollbar-width가 자동으로 설정된 경우 Firefox 브라우저에서 웹 페이지 스크롤 막대 표시

그건 그렇고, scrollbar-width어떤 이유로 속성 을 사용해야 한다면 autonot 으로 설정하십시오 thin. 값을 설정 auto하면 동일한 결과가 출력됩니다.

사용자 정의 스크롤바에 호버 효과를 추가하는 방법

:hoverCSS 의사 클래스 를 사용하여 스크롤바 썸에 호버 효과를 추가할 수 있습니다 .

/* Works on Chrome, Edge, and Safari */
::-webkit-scrollbar-thumb:hover {
    background-color: #ec8f02;
}

/* Works on Firefox */
.products {
    width: 300px;
    height: 100px;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: #f90 #f5f5f5;
    transition: scrollbar-color 0.3s ease-out;
}

.products:hover {
    scrollbar-color: #ec8f02 #f5f5f5;
}

Chrome 및 기타 브라우저 의 경우 pseudo-element 에 적용 :hover합니다 . ::-webkit-scrollbar-thumb특정 섹션에 사용할 수도 있습니다.

Firefox의 경우 섹션 스크롤 막대에 호버 효과를 추가할 수 있습니다. 이 경우 transition호버에 속성을 적용할 수도 있지만 ::-webkit-scrollbar-thumb불가능합니다.

필요할 때 스크롤 막대 표시

오버플로 속성을 추가하여 섹션을 스크롤 가능하게 만들 수 있습니다. 이 속성은 4개의 값을 허용합니다. , visible, scroll및 입니다 auto. hidden다음 visible은 기본값입니다.

  • visible– 공간이 충분하지 않지만 스크롤바가 없는 경우 섹션의 내용이 외부로 표시됨을 의미합니다.
  • scroll– 나머지 콘텐츠를 볼 수 있는 스크롤바가 있음을 의미합니다. 그러나 이 경우 사용자가 스크롤바를 필요로 하지 않는 콘텐츠가 적더라도 스크롤바는 그대로 유지됩니다.
  • auto– 콘텐츠가 원본 섹션보다 더 많은 공간이 필요한 경우 사용자에게 스크롤바가 표시되지만 콘텐츠가 적으면 스크롤바가 표시되지 않음을 의미합니다.
  • hidden – 스크롤바가 없다는 뜻입니다. 섹션에 더 많은 콘텐츠가 있는 경우 사용자는 나머지 콘텐츠를 볼 수 없습니다.

따라서 value 를 사용하면 auto섹션의 스크롤 막대가 조건부로 표시되는 것을 볼 수 있습니다. 해당 섹션에 더 많은 콘텐츠가 있고 더 많은 공간이 필요한 경우 스크롤 막대가 표시됩니다. 그렇지 않으면 사용자에게 스크롤바가 표시되지 않습니다.

.products {
    overflow-y: auto;
}

사용자 지정 스크롤바를 생성할 때의 모범 사례

웹 페이지용 맞춤 스크롤바를 만드는 방법을 알고 나면 몇 가지 기술을 따라야 합니다. 이러한 모범 사례를 따르지 않으면 사용자 경험이 손상될 수 있기 때문입니다.

  • 스크롤바 너비는 너무 얇거나 너무 두꺼워서는 안 됩니다.
  • 절대적으로 필요한 경우 섹션에 스크롤바를 추가하십시오. 그렇지 않으면 피하십시오.
  • 스크롤바를 추가해야 하는 경우 항상 스크롤 없이 볼 수 있는 부분에 중요한 정보를 표시하세요.
  • 스크롤바 썸과 트랙의 색상 사이에 적절한 대비가 있어야 합니다.
  • 스크롤바를 자동으로 숨기고 표시합니다. 내용이 적으면 스크롤바를 숨깁니다. 그렇지 않으면 표시합니다.

스크롤바 브라우저 지원

지금까지 본 속성에 대한 브라우저 지원을 확인해보자. 모든 -webkit-버전은 Chrome, Safari, Edge, Opera, Android 등과 같은 대부분의 브라우저에서 지원됩니다.

webkit-scrollbar 및 scrollbar-width CSS 속성의 브라우저 지원

아래 링크를 클릭하시면 직접 확인하실 수 있습니다.

Firefox의 경우 두 가지 CSS 속성이 있습니다. 지원을 확인하면 Firefox 브라우저에서만 지원된다는 것을 알 수 있습니다.

여기에서 브라우저 지원을 확인할 수 있습니다.

스크롤바 선택기

WebKit 브라우저의 경우 다음 의사 요소 를 사용하여 스크롤 막대의 다양한 부분을 사용자 지정할 수 있습니다.

  • ::-webkit-scrollbar배경과 같이 전체 스크롤바에 스타일을 추가하는 데 사용됩니다.
  • ::-webkit-scrollbar-button은 스크롤바의 화살표 버튼을 사용자 정의하는 데 사용됩니다.
  • ::-webkit-scrollbar-thumb는 누군가가 페이지를 스크롤할 때 움직이는 스크롤바의 드래그 가능한 요소에 스타일을 추가하는 데 사용됩니다.
  • ::-webkit-scrollbar-track엄지손가락이 위아래 또는 좌우로 움직이는 진행률 표시줄입니다.
  • ::-webkit-scrollbar-track-piece드래그 가능한 요소(엄지손가락)로 덮이지 않은 트랙 부분입니다.
  • ::-webkit-scrollbar-corner가로 및 세로 스크롤 막대가 만나는 모서리 부분입니다. 이것은 일반적으로 브라우저 창의 오른쪽 하단 모서리입니다.
  • ::-webkit-resizer일부 요소의 하단 모서리에 있는 스크롤 막대 모서리 위에 나타나는 드래그 가능한 크기 조정 핸들입니다.

Firefox 브라우저의 경우 이 두 CSS 속성을 사용하여 스크롤 막대를 사용자 지정할 수 있습니다.

  • scrollbar-color스크롤바의 썸과 트랙에 색상을 추가하는 데 사용됩니다.
  • scrollbar-widthauto, nonethin값 을 사용하여 스크롤 막대에 너비를 추가하는 데 사용됩니다 .

결론

이 기사에서는 스크롤바에 있는 모든 요소, 이를 사용자 정의하는 방법, 브라우저 지원 등에 대해 논의했습니다.

또한 웹 페이지에서 스크롤 막대를 사용자 지정하는 동안 따라야 하는 모범 사례가 무엇인지도 알고 있습니다. CSS를 사용하여 이 모든 작업을 수행할 수 있습니다.

이제 모든 웹 페이지에 대해 CSS에서 사용자 정의 스크롤바를 만드는 방법에 대한 명확한 아이디어가 있기를 바랍니다.

https://www.webmound.com 의 원본 기사 출처

#css #webdev 

What is GEEK

Buddha Community

CSS 튜토리얼 | CSS로 사용자 정의 스크롤바 만들기

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

최  호민

최 호민

1656914129

CSS 튜토리얼 | CSS로 사용자 정의 스크롤바 만들기

CSS에서 사용자 정의 스크롤바를 만들기 위한 궁극적인 가이드

스크롤바에 대해 알아보고 CSS를 사용하여 웹사이트에 대한 사용자 정의 스크롤바를 만드십시오. 이것은 당신을 위한 완전한 가이드입니다. 브라우저 지원, 효과 등이 포함됩니다.

때때로 우리 는 우리 웹사이트가 경쟁에서 눈에 띄도록 CSS로 사용자 정의 스크롤바를 만들고 싶을 때가 있습니다. 하지만 스크롤바의 스타일을 지정하는 것은 조금 복잡해 보입니다. 사용자 정의 스크롤바를 만드는 동안 프로세스에서 몇 가지 문제에 직면해야 하기 때문입니다.

이 기사에서는 순수 CSS를 사용하여 웹 사이트에 대한 사용자 정의 스크롤바를 만드는 방법을 보여 드리겠습니다. 나는 당신이 직면할 수 있는 모든 합병증과 그것을 해결할 수 있는 방법에 대해 논의할 것입니다.

웹사이트 스크롤바의 스타일을 지정하는 동안 직면하게 될 몇 가지 주요 문제가 있습니다.

  • 스크롤바를 쉽게 선택할 수 없습니다.
  • 다양한 유형의 스크롤바가 있습니다.
  • 모든 브라우저는 동일한 CSS 선택기를 지원하지 않습니다.
  • 브라우저마다 스크롤 막대가 다른 스타일로 표시됩니다.
  • 때때로 스크롤바가 예상치 못한 위치에 나타납니다.
  • 몇 가지 모범 사례를 따르지 않으면 사용자 경험을 방해할 수 있습니다.

이 기사에서 논의할 더 많은 문제가 있습니다. 이러한 장애물 때문에 우리는 종종 스크롤바의 스타일을 지정하고 싶지 않습니다.

브라우저의 기본 스크롤바는 괜찮습니다. 사용자 정의 디자인 스크롤바를 생성해야 하는 것은 의무 사항이 아닙니다. 내가 말하고 싶은 것은 당신이 원한다면 할 수 있다는 것입니다.

CSS에서 사용자 정의 스크롤바를 어떻게 만듭니까?

먼저 스크롤바의 다른 부분을 알아야 합니다. 다른 부분을 따로 스타일링해야 하기 때문입니다.

여러 브라우저를 지원하기 위해 스타일에 두 세트를 추가합니다. Firefox의 스크롤 막대 스타일은 다른 브라우저와 다르기 때문입니다.

필요할 때 스크롤바를 표시할 수도 있습니다. 그렇지 않으면 웹 사이트 사용자에게 더 많은 공간을 제공하기 위해 숨길 수 있습니다.

마지막으로 스크롤바가 사용자 경험을 향상시킬 수 있도록 몇 가지 좋은 기술을 따라야 합니다.

스크롤바의 종류(수직/수평)

웹 페이지에서 볼 수 있는 스크롤바에는 두 가지 유형이 있습니다.

  • 수직 스크롤바.
  • 수평 스크롤바.

일반적으로 가로 스크롤 막대는 특정 섹션에서 사용됩니다. 예를 들어 게시물 목록을 표시하려는 경우 가로로 표시할 수 있습니다. 많은 수의 블로그 게시물을 세로로 표시하면 엄청난 공간을 차지할 수 있고 사용자가 오랜 시간 동안 스크롤해야 하기 때문입니다.

이 문제를 해결하기 위해 해당 게시물을 가로로 표시할 수 있으며 콘텐츠가 사용자 장치의 사용 가능한 공간을 넘을 때 브라우저에서 가로 스크롤 막대를 추가합니다.

그리고 우리 모두는 수직 스크롤바에 대해 알고 있습니다. 거의 모든 웹 페이지의 오른쪽에 나타납니다.

특정 섹션에서 수직 스크롤바를 사용할 수도 있습니다. 예를 들어height 페이지의 섹션에 고정을 설정 하고 추가 overflow: auto;하면 해당 섹션 내부의 콘텐츠가 고정 높이보다 크면 브라우저에 수직 스크롤바가 표시됩니다.

스크롤바 구성요소

웹 페이지에서 스크롤바를 볼 때 몇 가지 부분이 보입니다. 수직 스크롤바에는 위아래로 두 개의 화살표 버튼 이 있습니다 . 수평 스크롤바에는 좌우 2개의 화살표 버튼 도 있습니다 .

웹 페이지 스크롤바의 모든 구성 요소 표시

이 버튼 외에 두 가지 다른 구성 요소가 있습니다. 하나는 thumb다른 하나입니다 thack.

  • 스크롤바 트랙.
  • 스크롤바 엄지.
  • 화살표 버튼(위 및 아래/왼쪽 및 오른쪽).

thumb페이지에서 우리가 이동하고 있는 위치를 보여줄 수 있는 부분입니다 .

반면에 track엄지손가락의 배경이 되는 엄지손가락 뒤에 있는 부분입니다. 트랙 내부에서 엄지손가락을 움직입니다.

이 기사에서 이러한 모든 구성 요소를 사용자 정의합니다.

Chrome, Edge 및 Safari에서 사용자 지정 스크롤 막대 만들기

앞서 말했듯이 모든 브라우저를 지원하려면 두 가지 스타일 세트를 추가해야 합니다. 먼저 Firefox 이외의 브라우저에서 스크롤바를 사용자 정의하는 방법을 보여 드리겠습니다.

다음 섹션에서는 Firefox에서만 작동하는 스타일을 볼 수 있습니다.

화살표 버튼을 표시하지 않고 Chrome 브라우저에서 스크롤바 사용자 정의

가로 및 세로 스크롤 막대의 스타일을 함께 지정할 수 있습니다. 동일한 스타일이 둘 다에 적용됩니다.

그러나 가로 및 세로에 대해 다른 스타일이 필요한 경우에도 그렇게 할 수 있습니다.

스타일을 지정하려면 두 스크롤 막대를 함께 스타일시트에 다음 코드를 추가합니다.

::-webkit-scrollbar {
    width: 1.4vw;
    height: 3.3vh;
}

::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 10px;
    margin-top: 3px;
    margin-bottom: 3px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #f90;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ec8f02;
}

여기에서 스크롤 막대에 스타일을 추가하기 위해 3개의 의사 요소를 사용했습니다.

  • ::-webkit-scrollbar– 전체 스크롤바에 영향을 줍니다.
  • ::-webkit-scrollbar-thumb– 이동할 수 있는 드래그 가능한 스크롤 핸들에 영향을 줍니다.
  • ::-webkit-scrollbar-track– 스크롤 핸들을 움직이는 공간에 영향을 줍니다.

::-webkit-scrollbar전체 스크롤 막대에 대해 작동하는 경우 다른 두 가지를 사용하는 이유를 생각할 수 있습니다 . 문제는 모든 CSS 속성이 ::-webkit-scrollbar요소 내부에서 작동하지 않는다는 것입니다.

예를 들어 속성이 요소 내부에서 작동하지 않기 때문에 속성 을 사용 border-radius했습니다 .::-webkit-scrollbar-trackborder-radius::-webkit-scrollbar

여기에서 margin-topmargin-bottom내부의 속성 은 세로 스크롤 막대에서만 작동하며 및 ::-webkit-scrollbar-track를 추가하면 이러한 속성은 가로 스크롤 막대에서만 작동합니다.margin-leftmargin-right

전체 스크롤 막대에 이것이 필요하기 때문에 내부 widthheight속성 을 설정 했습니다.::-webkit-scrollbar

너비와 높이를 동시에 사용하는 이유는 무엇입니까?

width속성은 세로 스크롤 막대에서만 작동하고 속성 height은 가로 스크롤 막대에서만 작동합니다.

설정 width하면 세로 스크롤 막대 height의 크기가 증가하고 가로 스크롤 막대의 크기가 증가합니다.

및 속성에 대해 각각 뷰포트 너비(vw)뷰포트 높이(vh) CSS 단위를 사용 했습니다. 여기에서 픽셀(px) 단위 를 사용하면 웹 페이지를 확대하거나 축소할 때 스크롤 막대 크기가 증가하거나 감소하기 때문입니다.widthheight

나는 그것을 원하지 않는다. 사용자가 내 웹 페이지를 확대하거나 축소할 때 크기가 변경되지 않도록 내 페이지에 고정 크기 스크롤 막대가 필요합니다.

스타일 수평 스크롤바

위의 코드는 두 가지 유형의 스크롤바에 스타일을 추가합니다. 수평 스크롤바만 사용자 정의하려는 경우 이것이 적합한 솔루션입니다.

일반적으로 가로 스크롤바는 특정 섹션에 추가됩니다. CSS class또는 id해당 유사 요소와 함께 해당 섹션의 스타일을 사용하여 해당 섹션에만 스타일을 적용할 수 있습니다.

예를 들어 수평 스크롤 막대를 표시하는 섹션에 .products클래스가 있는 경우 다음과 같이 해당 섹션을 선택할 수 있습니다.

  • .products::-webkit-scrollbar
  • .products::-webkit-scrollbar-track
  • .products::-webkit-scrollbar-thumb

다른 모든 것은 동일합니다. 앞에서 언급한 것과 같은 방식으로 CSS 속성을 사용할 수 있습니다.

차이점은 이 시간 스타일은 .products클래스 섹션의 스크롤 막대에만 적용된다는 것입니다.

스타일 수직 스크롤바

마찬가지로 웹 페이지의 기본 세로 스크롤 막대를 사용자 지정하려는 경우 이러한 유사 요소와 함께 body또는 태그를 사용할 수 있습니다.html

  • body::-webkit-scrollbar
  • body::-webkit-scrollbar-track
  • body::-webkit-scrollbar-thumb

또는

  • html::-webkit-scrollbar
  • html::-webkit-scrollbar-track
  • html::-webkit-scrollbar-thumb

둘 다 비슷한 방식으로 작동합니다. 이 방법을 사용하면 웹 페이지의 다른 스크롤 막대가 아닌 기본 세로 스크롤 막대에만 스타일이 적용됩니다.

스크롤 막대에서 화살표 버튼을 사용자 정의하는 방법

위의 코드를 스타일시트에 추가하면 화살표 버튼이 없음을 알 수 있습니다. 이러한 버튼을 사용하고 싶지 않다면 첫 번째 예제가 적합할 것입니다.

그러나 사용자 정의 스크롤 막대에 화살표 버튼을 포함하려면 아래에 언급된 코드를 사용할 수 있습니다.

::-webkit-scrollbar {
    width: 1.4vw;
    height: 3.3vh;
}

::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background-color: #f90;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ec8f02;
}

이 예에서는 첫 번째 스타일에서 일부 스타일을 변경했습니다. 이 코드는 기본 스크롤바를 사용자 정의합니다. 이것은 스크롤바의 기본 스타일입니다.

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #ece4e4;
    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-button:single-button:hover {
    background-color: #d0cbcb;
}

위의 코드는 버튼의 기본 스타일을 설정합니다. 여기에서 background 와 같은 일반적인 스타일을 추가할 수 있습니다 .

::-webkit-scrollbar-button화살표 버튼에 스타일을 추가하려면 다른 의사 클래스와 함께 의사 요소 를 사용해야 합니다.

  • :single-button
  • :horizontal
  • :vertical
  • :decrement
  • :increment

이제 화살표 버튼을 사용자 정의하겠습니다.

화살표 버튼을 사용하여 Chrome 브라우저에서 스크롤바 사용자 정의

수평 스크롤바의 스타일 화살표 버튼

:horizontal수평 스크롤바에서 화살표 버튼의 스타일을 지정하려면 의사 클래스 를 사용해야 합니다 .

이제 수평 스크롤바의 왼쪽 화살표 버튼 에 스타일을 추가 하려면 의사 클래스 :decrement와 함께 사용해야 합니다 .:horizontal

그런 다음 오른쪽 화살표 버튼 의 경우 의사 클래스 :increment와 함께 사용할 수 있습니다 .:horizontal

여기에서 각 버튼에 대해 width, height, background-positionbackground-imageCSS 속성을 설정합니다.

SVG 아이콘을 배경 이미지로 추가했습니다.

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    height: 12px;
    width: 15px;
    background-position: 4px 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    height: 12px;
    width: 15px;
    background-position: 5px 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
}

세로 스크롤 막대의 스타일 화살표 버튼

수직 스크롤 막대 화살표 버튼의 경우 :vertical의사 클래스를 사용하여 사용자 정의 스타일을 추가해야 합니다.

두 개의 다른 의사 클래스가 사용 :decrement되며 :increment각각 위 및 아래 화살표 버튼:vertical 에 사용 됩니다.

이 경우 SVG 아이콘 및 기타 CSS 속성을 추가할 수도 있습니다.

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 14px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 14px;
    width: 16px;
    background-position: center 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}

Firefox에서 사용자 정의 스크롤 막대 만들기

Firefox에서 사용자 정의를 위해 제한된 옵션이 있습니다. Firefox는 스크롤 막대에 사용자 정의 스타일을 추가하기 위해 두 가지 CSS 속성을 지원합니다.

  • scrollbar-width– 이 속성을 사용하면 스크롤 막대의 너비 또는 두께를 설정할 수 있습니다. auto, thin 및 none의 세 가지 값을 허용합니다 . 여기에서 autothin기본값이며 스크롤 막대를 기본값보다 얇게 만들고 none웹 페이지에서 스크롤 막대를 제거합니다.
  • scrollbar-color– 이 속성을 사용하면 스크롤 막대의 썸 및 트랙 색상을 설정할 수 있습니다. auto그 가치로 받아들 입니다. auto기본값입니다. 그러나 빨강, 파랑 등과 같은 두 가지 유효한 색상 이름을 전달하거나 #FC9901, #F5F5F5와 같은 두 가지 색상 코드를 전달할 수 있습니다.

속성 에서 scrollbar-color첫 번째 색상 이름 또는 색상 코드는 이동할 수 있는 스크롤 막대의 썸에 적용됩니다. 두 번째 색상 이름 또는 색상 코드는 엄지손가락을 움직이는 스크롤바의 트랙에 적용됩니다.

참고: 이 두 속성을 사용할 때마다 루트 요소에서 사용해야 합니다.

scrollbar-width가 thin으로 설정된 경우 Firefox 브라우저에서 웹 페이지 스크롤 막대 표시

두 가지 방법으로 스크롤바에 스타일을 추가할 수 있다는 것을 이미 알고 있습니다. 첫째, 페이지의 모든 스크롤바에 적용될 전역 범위에서. 둘째, 페이지의 특정 섹션에 스타일을 추가합니다.

이것을 전역 범위에 추가하려면 아래 코드를 따르십시오.

* {
    scrollbar-width: thin;
    scrollbar-color: #f90 #f5f5f5;;
}

여기에서 내가 선택 *하는 것은 모든 것을 의미합니다. 다음을 사용하여 이러한 속성을 적용하면 *모든 스크롤바에 대해 제대로 작동합니다.

html또는 대신 사용하려고 했지만 body제대로 작동하지 않습니다. 내가 사용했을 때 모든 스크롤 막대에서 작동하지만 html세로 스크롤 막대에서만 작동합니다.scrollbar-colorscrollbar-width

html {
    scrollbar-width: thin;
    scrollbar-color: #f90 #f5f5f5;
}

세로 스크롤 막대를 사용할 때 body효과가 없고 가로 스크롤 막대에서는 scrollbar-color작동하지만 scrollbar-width속성은 작동하지 않습니다. *따라서 전역 범위에 대한 선택기 와 함께 이러한 속성을 사용하는 것이 가장 좋습니다 .

body {
    scrollbar-width: thin;
    scrollbar-color: #f90 #f5f5f5;
}

특정 섹션에 사용하려면 해당 섹션의 루트 요소에 넣어야 합니다.

루트 요소는 무엇을 의미합니까?

제품 목록을 표시하는 섹션이 있고 이 섹션에서 스크롤 막대에 스타일을 적용하려고 합니다. 이 섹션 의 경우 모든 제품이 있는 요소의 경우 이러한 속성을 해당 요소에 적용해야 합니다.

<div class="products">
    <div class="single-product">
        <div class="accomodation_item text-center">
            <div class="hotel_img">
                <img src="image/room1.jpg" alt="">
                <a href="#" class="btn theme_btn button_hover">Book Now</a>
            </div>
            <a href="#">
                <h4 class="sec_h4">Double Deluxe Room</h4>
            </a>
        </div>
    </div>
    <div class="single-product">
        <div class="accomodation_item text-center">
            <div class="hotel_img">
                <img src="image/room1.jpg" alt="">
                <a href="#" class="btn theme_btn button_hover">Book Now</a>
            </div>
            <a href="#">
                <h4 class="sec_h4">Double Deluxe Room</h4>
            </a>
        </div>
    </div>
</div>

위의 예에서 모든 제품이 div의 클래스가 있는 내부에 있음을 볼 .products수 있으므로 스크롤 막대에 스타일을 추가하려면 이 클래스에 해당 CSS 속성을 추가해야 합니다.

.products {
    width: 300px;
    height: 100px;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: #f90 #f5f5f5;
}

속성 을 설정 thin하면 scrollbar-width화살표 버튼이 제거되고 스크롤 막대가 매우 얇아집니다. 사용하기가 매우 어려워집니다.

그러나 속성을 사용 scrollbar-color하지 않고 속성을 사용 scrollbar-width하면 색상과 함께 기본 두께를 얻습니다. 더 보기 좋고 더 나은 사용자 경험을 제공한다고 생각합니다.

scrollbar-width가 자동으로 설정된 경우 Firefox 브라우저에서 웹 페이지 스크롤 막대 표시

그건 그렇고, scrollbar-width어떤 이유로 속성 을 사용해야 한다면 autonot 으로 설정하십시오 thin. 값을 설정 auto하면 동일한 결과가 출력됩니다.

사용자 정의 스크롤바에 호버 효과를 추가하는 방법

:hoverCSS 의사 클래스 를 사용하여 스크롤바 썸에 호버 효과를 추가할 수 있습니다 .

/* Works on Chrome, Edge, and Safari */
::-webkit-scrollbar-thumb:hover {
    background-color: #ec8f02;
}

/* Works on Firefox */
.products {
    width: 300px;
    height: 100px;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: #f90 #f5f5f5;
    transition: scrollbar-color 0.3s ease-out;
}

.products:hover {
    scrollbar-color: #ec8f02 #f5f5f5;
}

Chrome 및 기타 브라우저 의 경우 pseudo-element 에 적용 :hover합니다 . ::-webkit-scrollbar-thumb특정 섹션에 사용할 수도 있습니다.

Firefox의 경우 섹션 스크롤 막대에 호버 효과를 추가할 수 있습니다. 이 경우 transition호버에 속성을 적용할 수도 있지만 ::-webkit-scrollbar-thumb불가능합니다.

필요할 때 스크롤 막대 표시

오버플로 속성을 추가하여 섹션을 스크롤 가능하게 만들 수 있습니다. 이 속성은 4개의 값을 허용합니다. , visible, scroll및 입니다 auto. hidden다음 visible은 기본값입니다.

  • visible– 공간이 충분하지 않지만 스크롤바가 없는 경우 섹션의 내용이 외부로 표시됨을 의미합니다.
  • scroll– 나머지 콘텐츠를 볼 수 있는 스크롤바가 있음을 의미합니다. 그러나 이 경우 사용자가 스크롤바를 필요로 하지 않는 콘텐츠가 적더라도 스크롤바는 그대로 유지됩니다.
  • auto– 콘텐츠가 원본 섹션보다 더 많은 공간이 필요한 경우 사용자에게 스크롤바가 표시되지만 콘텐츠가 적으면 스크롤바가 표시되지 않음을 의미합니다.
  • hidden – 스크롤바가 없다는 뜻입니다. 섹션에 더 많은 콘텐츠가 있는 경우 사용자는 나머지 콘텐츠를 볼 수 없습니다.

따라서 value 를 사용하면 auto섹션의 스크롤 막대가 조건부로 표시되는 것을 볼 수 있습니다. 해당 섹션에 더 많은 콘텐츠가 있고 더 많은 공간이 필요한 경우 스크롤 막대가 표시됩니다. 그렇지 않으면 사용자에게 스크롤바가 표시되지 않습니다.

.products {
    overflow-y: auto;
}

사용자 지정 스크롤바를 생성할 때의 모범 사례

웹 페이지용 맞춤 스크롤바를 만드는 방법을 알고 나면 몇 가지 기술을 따라야 합니다. 이러한 모범 사례를 따르지 않으면 사용자 경험이 손상될 수 있기 때문입니다.

  • 스크롤바 너비는 너무 얇거나 너무 두꺼워서는 안 됩니다.
  • 절대적으로 필요한 경우 섹션에 스크롤바를 추가하십시오. 그렇지 않으면 피하십시오.
  • 스크롤바를 추가해야 하는 경우 항상 스크롤 없이 볼 수 있는 부분에 중요한 정보를 표시하세요.
  • 스크롤바 썸과 트랙의 색상 사이에 적절한 대비가 있어야 합니다.
  • 스크롤바를 자동으로 숨기고 표시합니다. 내용이 적으면 스크롤바를 숨깁니다. 그렇지 않으면 표시합니다.

스크롤바 브라우저 지원

지금까지 본 속성에 대한 브라우저 지원을 확인해보자. 모든 -webkit-버전은 Chrome, Safari, Edge, Opera, Android 등과 같은 대부분의 브라우저에서 지원됩니다.

webkit-scrollbar 및 scrollbar-width CSS 속성의 브라우저 지원

아래 링크를 클릭하시면 직접 확인하실 수 있습니다.

Firefox의 경우 두 가지 CSS 속성이 있습니다. 지원을 확인하면 Firefox 브라우저에서만 지원된다는 것을 알 수 있습니다.

여기에서 브라우저 지원을 확인할 수 있습니다.

스크롤바 선택기

WebKit 브라우저의 경우 다음 의사 요소 를 사용하여 스크롤 막대의 다양한 부분을 사용자 지정할 수 있습니다.

  • ::-webkit-scrollbar배경과 같이 전체 스크롤바에 스타일을 추가하는 데 사용됩니다.
  • ::-webkit-scrollbar-button은 스크롤바의 화살표 버튼을 사용자 정의하는 데 사용됩니다.
  • ::-webkit-scrollbar-thumb는 누군가가 페이지를 스크롤할 때 움직이는 스크롤바의 드래그 가능한 요소에 스타일을 추가하는 데 사용됩니다.
  • ::-webkit-scrollbar-track엄지손가락이 위아래 또는 좌우로 움직이는 진행률 표시줄입니다.
  • ::-webkit-scrollbar-track-piece드래그 가능한 요소(엄지손가락)로 덮이지 않은 트랙 부분입니다.
  • ::-webkit-scrollbar-corner가로 및 세로 스크롤 막대가 만나는 모서리 부분입니다. 이것은 일반적으로 브라우저 창의 오른쪽 하단 모서리입니다.
  • ::-webkit-resizer일부 요소의 하단 모서리에 있는 스크롤 막대 모서리 위에 나타나는 드래그 가능한 크기 조정 핸들입니다.

Firefox 브라우저의 경우 이 두 CSS 속성을 사용하여 스크롤 막대를 사용자 지정할 수 있습니다.

  • scrollbar-color스크롤바의 썸과 트랙에 색상을 추가하는 데 사용됩니다.
  • scrollbar-widthauto, nonethin값 을 사용하여 스크롤 막대에 너비를 추가하는 데 사용됩니다 .

결론

이 기사에서는 스크롤바에 있는 모든 요소, 이를 사용자 정의하는 방법, 브라우저 지원 등에 대해 논의했습니다.

또한 웹 페이지에서 스크롤 막대를 사용자 지정하는 동안 따라야 하는 모범 사례가 무엇인지도 알고 있습니다. CSS를 사용하여 이 모든 작업을 수행할 수 있습니다.

이제 모든 웹 페이지에 대해 CSS에서 사용자 정의 스크롤바를 만드는 방법에 대한 명확한 아이디어가 있기를 바랍니다.

https://www.webmound.com 의 원본 기사 출처

#css #webdev 

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

Aisu  Joesph

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

CSS Animation: translate3d, backdrop-filter, and Custom Tags

In this tutorial, we are going to learn:

  • how to create a smooth animation using the CSS transform translate3d prop.
  • why we’d want to use the cubic-bezier transition timing function and this function’s benefits.
  • how and why we use custom tags.
  • if you watch the video to the end, I also provide a bonus tip on using backdrop-filter to style some frost/blur style on background.

#css #css animation #css / style sheets #css animations #css background