CSS는 스크롤 막대 스타일의 구문 분석을 제어합니다.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS는 스크롤 막대 스타일의 구문 분석을 제어합니다.

黄舟

Nov 17, 2017 am 09:35 AM

css분석하다

이전 두 기사에서 CSS 설정 div 스크롤 막대 스타일 및 CSS3 사용자 정의 스크롤 막대 스타일의 예를 소개했습니다. 콘텐츠가 컨테이너를 초과하면 스크롤 막대가 컨테이너에 나타나는 것을 우리 모두 알고 있습니다. CSS를 사용하여 스크롤 막대 스타일을 제어하시겠습니까? 오늘은 자세하게 소개해드리겠습니다!

예:

/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。
下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/
 /*定义滚动条轨道*/
    #style-2::-webkit-scrollbar-track
    {
        background-color: #F5F5F5;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
    }
    /*定义滚动条高宽及背景*/
    #style-2::-webkit-scrollbar
    {
        width: 10px;
        background-color: rgba(0, 0, 0, 0.34);
    }
    /*定义滚动条*/
    #style-2::-webkit-scrollbar-thumb
    {
        background-color: #8b8b8b;
        border-radius: 10px;
    }

CSS는 스크롤 막대 스타일의 구문 분석을 제어합니다.

*단일 p에서 콘텐츠 스크롤을 달성하려면 세 가지 조건이 충족되어야 합니다.

1 p는 고정 높이로 설정되어야 하며 탄력적 값은 다음과 같습니다. 백분율 또는 자동은 사용할 수 없습니다.

2. 콘텐츠의 높이는 자체 높이를 초과해야 합니다.

3. 속성 "overflow:auto"를 추가해야 합니다.

*스크롤 막대 숨기기:

1. 가로 스크롤 막대 제거:

<body style="overflow-x:hidden">

2. 세로 스크롤 막대 제거:

<body style="overflow-y:hidden">

3. 가로 및 세로 스크롤 막대 숨기기:

<body style="overflow-x:hidden;overflow-y:scroll">

더 좋은 방법은 스크롤 막대의 색상을 완전히 투명하게 설정하여 스크롤 막대를 표시하지 않고도 콘텐츠를 스크롤할 수 있도록 하는 것입니다.

응용 프로그램:

가로 스크롤 막대 없음:

<body style="overflow:hidden">或者<body scroll="no">

세로 스크롤 막대 없음

<p style="overflow-x:hidden">test</p>

스크롤 막대 없음

<p style="overflow-y:hidden">test</p>

스크롤 막대 자동 표시

<p style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</p>

스크롤 막대의 색상을 직접 정의하세요. 코드는 다음과 같습니다:

<p style="height:100px;width:100px;overflow:auto;">test</p>

위 2개 항목은 ,

, , <iframe>Attachment에 적용 가능합니다. overflow 속성과 다양한 기능 설명: overflow: 표시되며 내용을 자르지 않습니다. 스크롤바도 추가되지 않습니다. 기본값. 이 값을 사용하면 "너비"와 "높이"의 값이 어떻게 설정되더라도 범위를 벗어나는지 여부에 관계없이 내용이 강제로 표시됩니다. overflow:auto; 콘텐츠를 잘라내고 필요할 때 스크롤바를 추가합니다. overflow: 숨김, 개체 높이를 초과하는 콘텐츠를 표시하지 않습니다. overflow:scroll; 항상 수직 스크롤 막대를 표시합니다. overflow 가로, 세로 방향으로 콘텐츠가 넘칠 때의 설정 overflow-x 콘텐츠가 가로 방향으로 넘칠 때의 설정 overflow-y 콘텐츠가 세로 방향으로 넘칠 때의 설정 의 값 위의 속성 설정은 visible, scroll, hide, autohidden은 visible과 반대 효과를 갖습니다. "너비"와 "높이"를 넘어서는 것은 보이지 않습니다. 스크롤 내용이 범위를 벗어나는지 여부에 관계없이 스크롤 막대가 표시됩니다. 요약: 이 글을 공부함으로써 친구들이 CSS 컨트롤 스크롤바 스타일을 더 잘 이해할 수 있을 것이라고 믿습니다. 관련 권장 사항: <p class="title" style="margin: 0px 0px 3px; padding: 0px; font-size: 15px; line-height: 20px; height: 21px; overflow: hidden; text-overflow: ellipsis; color: rgb(51, 51, 51); font-family: " hiragino sans gb yahei micro hei tahoma arial sans-serif background-color: rgb>CSS3 사용자 정의 스크롤 막대 스타일의 자세한 예<a href="http://www.php.cn/css-tutorial-381391.html" target="_blank"></a> <p class="title" style="margin: 0px 0px 3px; padding: 0px; font-size: 15px; line-height: 20px; height: 21px; overflow: hidden; text-overflow: ellipsis; color: rgb(51, 51, 51); font-family: " hiragino sans gb yahei micro hei tahoma arial sans-serif background-color: rgb> <p class="title" style="margin: 0px 0px 3px; padding: 0px; font-size: 15px; line-height: 20px; height: 21px; overflow: hidden; text-overflow: ellipsis; color: rgb(51, 51, 51); font-family: " hiragino sans gb yahei micro hei tahoma arial sans-serif background-color: rgb>CSS 설정 div 스크롤 막대 스타일의 예<a href="http://www.php.cn/css-tutorial-381390.html" target="_blank"></a> <p class="title" style="margin: 0px 0px 3px; padding: 0px; font-size: 15px; line-height: 20px; height: 21px; overflow: hidden; text-overflow: ellipsis; color: rgb(51, 51, 51); font-family: " hiragino sans gb yahei micro hei tahoma arial sans-serif background-color: rgb> <p class="title" style="margin: 0px 0px 3px; padding: 0px; font-size: 15px; line-height: 20px; height: 21px; overflow: hidden; text-overflow: ellipsis; color: rgb(51, 51, 51); font-family: " hiragino sans gb yahei micro hei tahoma arial sans-serif background-color: rgb><a href="http://www.php.cn/div-tutorial-375071.html" target="_blank">html의 div 스크롤 막대 스타일 디자인 예</a></iframe>

위 내용은 CSS는 스크롤 막대 스타일의 구문 분석을 제어합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM

나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?

@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM

그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.

빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AM

CSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다

CSS의 품질과 복잡성을 모니터링하는 스택을 찾아Apr 18, 2025 am 11:22 AM

많은 개발자들은 CSS 코드베이스를 유지하는 방법에 대해 글을 썼지 만 코드베이스의 품질을 어떻게 측정하는지에 대해 많은 글을 쓰지 않습니다. 물론, 우리는 가지고 있습니다

Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Apr 18, 2025 am 11:08 AM

짧고 임의의 텍스트를 수락 해야하는 양식이 있습니까? 이름이나 다른 것 같습니다. 정확히 무엇을위한 것입니다. 많은 것이 있습니다

취리히에서 열린 전면 회의Apr 18, 2025 am 11:03 AM

나는 프론트 컨퍼런스를 위해 스위스 취리히로 향하게되어 매우 기쁩니다 (그 이름과 URL을 사랑합니다!). 나는 전에 스위스에 가본 적이 없기 때문에 나는 흥분했다

CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축Apr 18, 2025 am 10:58 AM

소프트웨어 개발에서 제가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 세부 사항에 푹 빠지는 경향이있는 개발자로서

NUXT 응용 프로그램에서 동적 경로 생성Apr 18, 2025 am 10:53 AM

이 게시물에서는 들어오는 데이터를 위해 동적 경로를 만드는 방법을 보여주기 위해 NetLify에 구축하고 배포 한 전자 상거래 상점 데모를 사용합니다. 상당히입니다

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

뜨거운 도구

SublimeText3 중국어 버전

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

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

드림위버 CS6

시각적 웹 개발 도구

mPDF

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