How to hide div scroll bar in css-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to hide div scroll bar in css

Apr 13, 2021 am 10:31 AM

css

How to hide the div scroll bar in css: first create an HTML sample file; then define some text content in the body; then set the height of the scroll part; finally, hide the div scroll through the "display:none;" attribute That’s it.

How to hide div scroll bar in css

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

css Add scrolling to the div and hide the scroll bar, or modify the scroll bar track color

In the html

&lt;div class=&quot;box&quot;&gt;
    &lt;div&gt;下面内容会单独滚动&lt;/div&gt;
    &lt;div class=&quot;scroll&quot;&gt;
        &lt;div class=&quot;content&quot;&gt;
            &lt;p&gt;1111111111111111&lt;/p&gt;
            &lt;p&gt;222222222222222&lt;/p&gt;
            &lt;p&gt;333333333333333&lt;/p&gt;
            &lt;p&gt;4444444444444444&lt;/p&gt;
            &lt;p&gt;1111111111111111&lt;/p&gt;
            &lt;p&gt;222222222222222&lt;/p&gt;
            &lt;p&gt;333333333333333&lt;/p&gt;
            &lt;p&gt;4444444444444444&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

Copy after login

css part

&lt;style&gt;
    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;
    }
&lt;/style&gt;

Copy after login

　Or if needed Modify the scroll bar style and use the following style

&lt;style&gt;
    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;
    }
&lt;/style&gt;

Copy after login

[Recommended learning: css video tutorial]

The above is the detailed content of How to hide div scroll bar in css. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn