CSS에서 div 스크롤 막대를 숨기는 방법

Css에서 div 스크롤 막대를 숨기는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 일부 텍스트 콘텐츠를 정의한 다음 스크롤 부분의 높이를 설정하고 마지막으로 "display:none"을 통해 div 스크롤 막대를 숨깁니다. ;" 기인하다.

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

css div에 스크롤을 추가하고 스크롤 막대를 숨기거나 스크롤 막대 트랙 색상을 수정하세요

html

<div class="box">
    <div>下面内容会单独滚动</div>
    <div class="scroll">
        <div class="content">
            <p>1111111111111111</p>
            <p>222222222222222</p>
            <p>333333333333333</p>
            <p>4444444444444444</p>
            <p>1111111111111111</p>
            <p>222222222222222</p>
            <p>333333333333333</p>
            <p>4444444444444444</p>
        </div>
    </div>
</div>

css 부분에서

<style>
    div{
        font-size: 15px;
        margin-bottom: 20px;
    }
    .content{
        height: 300px;v // 必须设定滚动部分的高度
        background-color: cadetblue;
        color: antiquewhite;
        overflow-x: hidden; /*x轴禁止滚动*/
        　　　　 overflow-y: scroll;/*y轴滚动*/
    }
    .content::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }
    p{
        margin-bottom: 30px;
        font-size: 17px;
        color: #333;
    }
</style>

또는 스크롤 막대 스타일을 수정해야 하는 경우 다음 스타일을 사용하세요

<style>
    div{
        font-size: 15px;
        margin-bottom: 20px;
    }
    .content{
        height: 300px;v // 必须设定滚动部分的高度
        background-color: cadetblue;
        color: antiquewhite;
        overflow-x: hidden; /*x轴禁止滚动*/
        　　　　 overflow-y: scroll;/*y轴滚动*/
    }
         .content::-webkit-scrollbar{ //设置滚动条宽高
             width:8px;
             height:8px
        }
         .content::-webkit-scrollbar-track{// 滚动条轨道样式
              -webhit-box-shadow: inset 0 0 5px transparent;
              border-radius:0;
              background:transparent;
         }
         .content::-webkit-scrollbar-thumb{//滚动条样式
            border-radius:5px;
            -webkit-box-shadow:inset 0 0 5px #242B56;
            background:#242B56;  
         }
    p{
        margin-bottom: 30px;
        font-size: 17px;
        color: #333;
    }
</style>

[추천 학습: css 동영상 튜토리얼]

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