本文介绍了 html中 滚动条如何添加与隐藏
滚动条是web开发中经常会遇到的组件，如何添加与隐藏滚动条呢 可以参考下面的代码
先创建一个普通文本页
<html>
<head>
</head>
<body>
<div class="showscroll">
<p>演示滚动条样式</p>
<p>演示滚动条样式02</p>
<p>演示滚动条样式03</p>
</div>
</body>
</html>
效果如图：
添加滚动条
<html>
<head>
<style>
.showscroll{
overflow-y:scroll; //纵向滚动条
/*overflow-x:scroll; //横向滚动条*/
height:50px;
width:300px
}
.hiddenscroll{
overflow-y: hidden; //隐藏纵向滚动条
}
</style>
</head>
<body>
<div class="showscroll">
<p>演示滚动条样式</p>
<p>演示滚动条样式02</p>
<p>演示滚动条样式03</p>
</div>
</body>
</html>
效果如图：
隐藏滚动条
<html>
<head>
<style>
.hiddenscroll{
overflow-y: hidden; //隐藏纵向滚动条
}
</style>
</head>
<body>
<div class="hiddenscroll">
<p>演示滚动条样式</p>
<p>演示滚动条样式02</p>
<p>演示滚动条样式03</p>
</div>
</body>
</html>
效果如图：
备注：本文属于原创文章 地址：http://www.catroom.com.cn/article/1414 转载请注明出处
发表评论
取消回复