css实现滚动并隐藏滚动条

最新推荐文章于 2024-06-20 15:42:34 发布

mqbug

最新推荐文章于 2024-06-20 15:42:34 发布

阅读量691

点赞数 1

分类专栏：网页前端文章标签： css html

本文链接：https://blog.csdn.net/mqbug/article/details/104518696

版权

网页前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css实现滚动并隐藏滚动条

在做网页前端页面时，有些场景需要实现滚动的效果，但是由于滚动条的出现，造成页面效果有些突兀，不美观。
这时候就需要一个既能滚动并能隐藏滚动条的效果了。

1、简单来说需要3个盒子
2、最外层的盒子与最里面的盒子要设置宽高
3、最外层的盒子需要设置相对定位 relative 溢出隐藏overflow: hidden;
4、最里层盒子需要绝对定位设置overflow-y: scroll;

测试了一下，ie 火狐都可以用
以下全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
	</head>
	<style>
		.item,
		.outer-box {
			width:550px;
			height: 200px;
		}

		.outer-box {
			margin: 0 auto;
			position: relative;
			overflow: hidden;
		}

		.inner-box {
			position: absolute;
			overflow-y: scroll;
		}
	</style>
	<body>
		<div class="outer-box">
			<div class="inner-box">
				<div class="item">
					<h2>名言警句摘抄大全_名言名句大全</h2>
					　　1、最灵繁的人也看不见自己的背脊。——非洲<br />
					　　2、最困难的事情就是认识自己。——希腊<br />
					　　3、有勇气承担命运这才是英雄好汉。——黑塞<br />
					　　4、与肝胆人共事，无字句处读书。——周恩来<br />
					　　5、阅读使人充实，会谈使人敏捷，写作使人精确。——培根<br />
					　　6、最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎<br />
					　　7、自知之明是最难得的知识。——西班牙<br />
					　　8、勇气通往天堂，怯懦通往地狱。——塞内加<br />
					　　9、有时候读书是一种巧妙地避开思考的方法。——赫尔普斯<br />
					　　10、阅读一切好书如同和过去最杰出的人谈话。——笛卡儿<br />
					　　11、越是没有本领的就越加自命不凡。——邓拓<br />
					　　12、越是无能的人，越喜欢挑剔别人的错儿。——爱尔兰<br />
					　　13、知人者智，自知者明。胜人者有力，自胜者强。——老子<br />
					　　14、意志坚强的人能把世界放在手中像泥块一样任意揉捏。——歌德<br />
					　　15、最具挑战性的挑战莫过于提升自我。——迈克尔·F·斯特利<br />
				</div>
			</div>
		</div>

	</body>
</html>