찾다
웹 프론트엔드CSS 튜토리얼CSS에서 스크롤 막대 너비를 설정하는 방법

스크롤 막대의 너비를 설정하는 방법: 먼저 "::-webkit-scrollbar" 의사 클래스 선택기를 사용하여 요소의 스크롤 막대를 선택한 다음 width 속성을 사용하여 스크롤 막대의 너비를 설정합니다. 구문은 "::-webkit-scrollbar" {너비:너비 값;}"입니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        body{
            width: 540px; 
            height: 400px;
        }
        ::-webkit-scrollbar{
            width:30px;
        }
        ::-webkit-scrollbar-track{
                background-color:#bee1eb;
                }
            ::-webkit-scrollbar-thumb{
                background-color:#00aff0;
                }
        </style>
    </head>

    <body>
        <div class="logo"> </div>
        布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、
        <br>
        暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、
        <br>
        英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、
        <br>
        布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、
        <br>
        暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、
        <br>
        英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、
        <br>布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、布偶猫、
        <br>
        暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、暹罗猫、
        <br>
        英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫、英国短毛猫
    </body>

</html>

효과:

CSS에서 스크롤 막대 너비를 설정하는 방법

추천 학습: css 비디오 튜토리얼

위 내용은 CSS에서 스크롤 막대 너비를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript 응용 프로그램에 CSS를 포함시키는 많은 방법JavaScript 응용 프로그램에 CSS를 포함시키는 많은 방법Apr 19, 2025 am 10:08 AM

프론트 엔드 개발의 땅에서 엄청나게 논란의 여지가있는 주제에 오신 것을 환영합니다! 이 글을 읽는 대다수가 당신의 박람회를 만났을 것입니다.

Netlify Analytics 소개Netlify Analytics 소개Apr 19, 2025 am 10:07 AM

당신은 사이드 프로젝트에서 잠시 일합니다. 당신은 그것을 꽤 멋지다고 생각합니다! 당신은 그것을 세상으로 풀기로 결정했습니다. 그리고… 잘 어울립니다. 아니면 잘되지 않습니다. 기다리다,

5 성급 등급을위한 5 가지 방법5 성급 등급을위한 5 가지 방법Apr 19, 2025 am 10:04 AM

좋아요와 소셜 통계의 세계에서 리뷰는 피드백을 남기는 데 매우 중요한 방법입니다. 사용자는 종종 전에 다른 사람의 의견을 알고 싶어합니다.

CSS를 잘 모르는 경우 어떤 CSS가 가장 의미가 있습니까?CSS를 잘 모르는 경우 어떤 CSS가 가장 의미가 있습니까?Apr 19, 2025 am 09:56 AM

Peter-Paul 은이 질문을 게시했습니다.

클립 경로로 애니메이션클립 경로로 애니메이션Apr 19, 2025 am 09:52 AM

Clip-Path는 우리가 일반적으로 알고있는 CSS 속성 중 하나이지만 어떤 이유로 든 종종 도달하지 못할 수도 있습니다. 의미가 약간 위협적입니다

Gatsby와 함께 GraphQL 놀이터 사용Gatsby와 함께 GraphQL 놀이터 사용Apr 19, 2025 am 09:51 AM

나는 대부분의 사람들이 이미 개츠비에 대해 들었다고 가정하고 있으며, 적어도 그것이 기본적으로 반응 사이트의 정적 사이트 생성기라는 것을 느슨하게 알고 있습니다. 일반적으로

유형 또는 테스트 : 왜 둘 다 안됩니까?유형 또는 테스트 : 왜 둘 다 안됩니까?Apr 19, 2025 am 09:50 AM

때때로, 토론은 타이핑 된 JavaScript의 가치에 대해 불쾌합니다. "더 많은 테스트를 작성하십시오!" 상대방을 외칩니다. "단위 테스트를 유형으로 교체하십시오!"

git의 그래픽 사용자 인터페이스git의 그래픽 사용자 인터페이스Apr 19, 2025 am 09:46 AM

Lemme는 요즘 Git Guis의 주요 플레이어처럼 보이는 것을 마무리합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기