PC端区域滚动-css滚动条

目的: 实现部分区域内容滚动, 但不产生滚动条 

方法一: 利用css3属性, -webkit-scrollbar ( 不兼容 火狐 和 IE ) 仍然有滚动条

<style>
#box-01 {
    width: 300px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 30px;
    text-align: center;
    border: 1px solid #ccc;
}
#box-01::-webkit-scrollbar {
    display: none;
}
</style>
<div id="box-01">
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
</div>

方法二: 嵌套盒子, 设置子盒子的滚动条超出父盒子, 隐藏掉即可

优点: 兼容所有浏览器

<style>
/* 父容器设置宽度, 并超出部分不显示 */
#box-02 {
    width: 300px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
}
#box-02>div {
    /* 子容器比父容器的宽度多 17 px, 正好是滚动条的默认宽度 */
    width: 317px;
    height: 300px;
    line-height: 30px;
    text-align: center;
    overflow-y: scroll;
}
</style>
<div id="box-02">
    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
    <div>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
        你好 </br>你好 </br>
    </div>
</div>

参考文章:

• https://www.cnblogs.com/lovling/p/8000363.html
• css overflow属性
• CSS3自定义滚动条样式 -webkit-scrollbar