web前端——css写隐藏滚动条但可以有滚动的效果【最简单有效办法~】

最新推荐文章于 2024-08-31 10:11:32 发布

MAH1996

最新推荐文章于 2024-08-31 10:11:32 发布

阅读量3.2k

点赞数

分类专栏：前端 css 文章标签： web前端

本文链接：https://blog.csdn.net/weixin_43941584/article/details/85997792

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

在滚动区域外面写一个容器，宽度比滚动区域小17px（滚动条的宽度）

外容器overflow:hidden；内容器：overflow-y:scroll;即可~

代码如下


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css隐藏滚动条但是可以滚动</title>
		<style>
			* {
				margin: 0;padding: 0;
			}			
			.containerOut {
				width: 100px;height: 300px;overflow: hidden;background: #CCCCCC;
			}			
			.container {
				width: 117px;height: 300px;line-height: 30px;text-align: center;overflow-y: scroll;
			}
		</style>
	</head>

	<body>
		<div class="containerOut">
			<div class="container">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>10</li>
					<li>11</li>
					<li>12</li>
					<li>13</li>
				</ul>
			</div>
		</div>
	</body>
</html>