css+html展示去滚动条,但保留滚动效果

最新推荐文章于 2023-06-29 13:58:13 发布

hsany330

最新推荐文章于 2023-06-29 13:58:13 发布

阅读量1.9k

点赞数 1

摘要: 在页面中想要实现某个区域的竖向滚动,但是有时候,列表值不多,又会有一个空的滚动条放在那里,就会显得比较难看,那么怎么样才能去掉这个难看的滚动条,而又实现单个区域滚动的效果呢?

不要小看了css+html,虽然说网页上的任何效果都是可以用js来实现,但是往往用到js来处理的话,就会影响dom,从而产生性能上的问题,

就来举一个小例子

因为要做一个单独区域的滚动,而滚动区域的内容是动态渲染的,先来看代码吧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.outElem{
			height: 100px;
			width: 200px;
		}
		.inElem{
			overflow-y:scroll; 
		}
	</style>
</head>
<body>
	<div class="outElem">
		<ul class="inElem">
			<li>1111</li>
			<li>222</li>
			<li>3333</li>
			<li>4444</li>
			<li>555</li>
			<li>6666</li>
		</ul>
	</div>
</body>
</html>

现在我们看到的效果是这样的

那么问题就来了,当这个数据正好显示的时候,边上这个空白的滚动条就有点多余

但是如果在css中去掉overflow的话,

如果动态数据比较多,又需要滚动了怎么办?

那这个时候不借助js的最好方法是怎么样的呢?

看下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.outElem{
			height: 100px;
			width: 200px;
			overflow: hidden;
		}
		.inElem{
			overflow-y:scroll; 
			overflow-x:hidden;
			width: 210px;
			height: 100%;
		}
	</style>
</head>
<body>
	<div class="outElem">
		<ul class="inElem">
			<li>1111</li>
			<li>222</li>
			<li>3333</li>
			<li>4444</li>
			<li>555</li>
			<li>6666</li>
			<li>6666</li>
			<li>6666</li>
			<li>6666</li>
			<li>6666</li>
		</ul>
	</div>
</body>
</html>

这个时候看到的网页效果就是这样的

这个时候把鼠标放在这块区域上,是可以滚动的,而且也去掉了边上难看的滚动条

那么要做的这个效果的话有四个要素

1.外层元素必须设置overflow:hidden

2.内层元素必须设置overflow-y:scroll

3.内层的width必须大于外层的width,且正好可以把滚动条给遮住

4.内层height:100%,才能滚动起来

转载：https://my.oschina.net/codingBingo/blog/714081

hsany330

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css+html展示去滚动条,但保留滚动效果

摘要: 在页面中想要实现某个区域的竖向滚动,但是有时候,列表值不多,又会有一个空的滚动条放在那里,就会显得比较难看,那么怎么样才能去掉这个难看的滚动条,而又实现单个区域滚动的效果呢?不要小看了css+html,虽然说网页上的任何效果都是可以用js来实现,但是往往用到js来处理的话,就会影响dom,从而产生性能上的问题,就来举一个小例子因为要做一个单独区域的滚动,而滚动区域的内容
复制链接

扫一扫