html隐藏滚轮条_html-js-css

概述原文：https://www.cnblogs.com/lovling/p/8000363.html 方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容火狐和 IE <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>超出部分隐藏滚动条</title></

原文：https://www.cnblogs.com/lovling/p/8000363.html

方法一,利用 CSS 3 的新特性 -webkit-scrollbar,但是这种方式不兼容火狐和 IE

<!DOCTYPE HTML><HTML><head>    <Meta charset="UTF-8">    <Title>超出部分隐藏滚动条</Title></head><style type="text/CSS">    #Box {        wIDth: 500px;        height: 300px;        overflow-x: hIDden;        overflow-y: scroll;        line-height: 30px;        text-align: center;    }    #Box::-webkit-scrollbar {        display: none;    }</style><body>    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->    <div ID="Box">        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>        你好 </br>你好 </br>    </div></body></HTML>

方法二,利用内外层嵌套,模拟,兼容所有浏览器,相对于方法一比较麻烦,使用时不能对滚动条声明任何样式

<!DOCTYPE HTML><HTML><head>    <Meta charset="UTF-8">    <Title>超出部分滚动条</Title></head><style type="text/CSS">    #Box {        /* 父容器设置宽度,并超出部分不显示 */        wIDth: 500px;        height: 300px;        overflow: hIDden;    }    #Box > div {        /* 子容器比父容器的宽度多 17 px,经测正好是滚动条的默认宽度 */        wIDth: 517px;        height: 300px;        line-height: 30px;        text-align: center;        overflow-y: scroll;    }</style><body>    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->    <div ID="Box">        <div>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>            你好 </br>你好 </br>        </div>    </div></body></HTML>