css设置滚动调隐藏还是可以滚动

最新推荐文章于 2024-08-24 16:38:53 发布

hua_ban_yu

最新推荐文章于 2024-08-24 16:38:53 发布

阅读量671

点赞数

分类专栏：前端 css 文章标签：滚动条隐藏依旧可以滚动滚动条隐藏同时可以滚动

本文链接：https://blog.csdn.net/hua_ban_yu/article/details/82798452

版权

前端同时被 2 个专栏收录

73 篇文章 6 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

在开发过程中，有时候需要把滚动条隐藏但依然可以实现滚动效果，这个要如何实现呢？原理很简单，只要在需要隐藏滚动条的div外面加上一个父div，然后设置父div内容超出隐藏，同时把子div的高设置100%、宽设置为100%+滚动条的宽、overflow:auto,就可以实现滚动条隐藏依然可以滚动效果。

实现代码，可以直接复制后查看效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.scroll-hidden{
				height: 150px;
				overflow: hidden;
				border:1px solid #ddd
			}
			.scroll{
				overflow-y: auto;
				height: 100%;
				width: calc(100% + 20px);
			}
			p{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="scroll-hidden">
			<div class="scroll">
					<p>将进酒</p>
				<p>	唐代:李白</p>
				<p>	君不见，黄河之水天上来，奔流到海不复回。</p>
				<p>	君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
				<p>	人生得意须尽欢，莫使金樽空对月。</p>
				<p>	天生我材必有用，千金散尽还复来。</p>
				<p>	烹羊宰牛且为乐，会须一饮三百杯。</p>
				<p>	岑夫子，丹丘生，将进酒，杯莫停。</p>
				<p>	与君歌一曲，请君为我倾耳听。</p>
				<p>	钟鼓馔玉不足贵，但愿长醉不复醒。</p>
				<p>	古来圣贤皆寂寞，惟有饮者留其名。</p>
				<p>	陈王昔时宴平乐，斗酒十千恣欢谑。</p>
				<p>	主人何为言少钱，径须沽取对君酌。</p>
				<p>	五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
			</div>
		</div>
	</body>
</html>