去除滚动条后依然有滚动效果

最新推荐文章于 2024-08-29 01:42:26 发布

一只叮code的小蚊子

最新推荐文章于 2024-08-29 01:42:26 发布

阅读量1.6k

点赞数

分类专栏： html与css 文章标签：滚动条的滚动效果隐藏滚动条设置滚动

本文链接：https://blog.csdn.net/ZJW222/article/details/80531842

版权

html与css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

使用CSS去除滚动条，但依然保留滚动效果

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
	    height: 400px;
	    width: 800px;
	    overflow: hidden;
	}
	.content{
	    overflow-y:scroll; 
	    overflow-x:hidden;
	    width: 820px;
	    height: 100%;
	}
    </style>
</head>
<body>
    <div class="container">
	<ul class="content">
	    <li><a href='#'>科学<a></li>
	    <li><a href='#'>娱乐<a></li>
	    <li><a href='#'>国际<a></li>
	    <li><a href='#'>国内<a></li>
	    <li><a href='#'>头条<a></li>
	    <li><a href='#'>军事<a></li>
	    <li><a href='#'>体育<a></li>
	    <li><a href='#'>热点<a></li>
	</ul>
    </div>
</body>
</html>

*父级元素必须设置overflow:hidden

*子级元素必须设置overflow-y:scroll

*子级的width必须大于父级的width,且正好能够将滚动条给遮掩住

*子级height:100%,页面才能滚动起来