CSS add scrolls to div and hide scrollbars

Time:2020-10-17

CSS adds scrolling to div and hides the scroll bar. The specific code is as follows:

In HTML

<div class="box">
    < div > the following will scroll separately < / 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 part

<style>
    div{
        font-size: 15px;
        margin-bottom: 20px;
    }
    .content{
        Height: 300px; V // the height of the scrolling part must be set
        background-color: cadetblue;
        color: antiquewhite;
        Overflow-x: hidden; / * x axis cannot scroll*/
             Overflow-y: scroll; / * Y-axis scroll*/ 
    }
    .content::-webkit-scrollbar {
        Display: none; / * hide scroll bar*/ 
    }
    p{
        margin-bottom: 30px;
        font-size: 17px;
        color: #333;
    }
</style>

summary

The above is the CSS introduced by Xiaobian to you. Add the scroll bar to div and hide the scroll bar. I hope it will be helpful for you. If you have any questions, please leave me a message, and the editor will reply you in time. Thank you very much for your support to the developeppaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!