一、在浏览器中隐藏滚动条
二、隐藏滚动条不影响滚动操作
三、鼠标放到蓝色框中即可滚动
四、具体实现代码见注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>隐藏滚动条</title>
<style type="text/css">
.overflow {
width: 300px;
height: 300px;
border: 1px solid #40AFFE;
text-align: center;
margin: 0 auto;
overflow: auto;
/*隐藏滚动条，当IE下溢出，仍然可以滚动*/
-ms-overflow-style: none;
/*火狐下隐藏滚动条*/
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
/* 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器 */
.overflow::-webkit-scrollbar {
width: 0px;
display: none;
}
ul {
margin: 0;
padding: 0;
}
li {
margin: 5px 0;
padding: 5px 0;
list-style: none;
}
</style>
</head>
<body>
<div class="overflow">
<p>蝉</P>
<p>李商隐 〔唐代〕</P>
<ul>
<li>本以高难饱，徒劳恨费声</li>
<li>五更疏欲断，一树碧无情</li>
<li>薄宦梗犹泛，故园芜已平</li>
<li>烦君最相警，我亦举家清</li>
</ul>
<p>凉思</P>
<p>李商隐 〔唐代〕</P>
<ul>
<li>客去波平槛，蝉休露满枝</li>
<li>永怀当此节，倚立自移时</li>
<li>北斗兼春远，南陵寓使迟</li>
<li>天涯占梦数，疑误有新知</li>
</ul>
</div>
</body>
</html>