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>
html横向滚动条样式你好</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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。