HTML ===＞去掉页面滚动条，但保留滚动效果

75 阅读 0 评论 50 点赞

我是靠谱客的博主个性星月，最近开发中收集的这篇文章主要介绍HTML ===＞去掉页面滚动条，但保留滚动效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

制造两层，一个父层，一个子层，如果是div去滚动条就在内容div外面再加一层div，如果是要去掉整个页面的滚动条，那就给html（父）和body（子）设置样式就可以了。

html{
height: 100%;
width: 100%;
overflow: hidden;
}
body{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
}

<html>
<head >
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parentDiv{
height: 100px;
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
}
.childDiv{
height: 100%;
width: 200px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<div class="parentDiv">
<ul class="childDiv">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</body>
</html>