css隐藏滚动条又可以滚动

最新推荐文章于 2024-05-21 00:00:00 发布

judy_1118

最新推荐文章于 2024-05-21 00:00:00 发布

阅读量157

点赞数

分类专栏： html+css 文章标签： css 滚动条

本文链接：https://blog.csdn.net/judykang123/article/details/100115294

版权

html+css 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

css隐藏滚动条又可以滚动（亲测有效）

前几天因为隐藏滚动条又得能滚动这个功能搜了挺长时间，本来就用的iframe，两个滚动条真的丑爆了！后来看好多帖子再加上帖子下面的回帖各种试才整出来，今天又整理了一下，先写上省得自己下次又忘了

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.outside_box{
			width: 100px;
			height: 100px;
			border: 1px solid red;
			overflow-x: hidden;
		    overflow-y: auto;


		   /*IE下隐藏滚动条*/
		    -ms-overflow-style:none;
		    /*火狐下隐藏滚动条*/
		    scrollbar-width: none;
		}
		/*谷歌, 苹果，欧朋下隐藏滚动条*/
		.outside_box::-webkit-scrollbar {display:none}

		.inside_box{
			width: 100px;
			height: 200px;
			background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
		    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
		    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
		    background: linear-gradient(red, blue); /* 标准的语法 */
		}
	</style>
</head>
<body>
	<!-- 为了设置滚动，把外面的div设置100*100，里面的设置100*200并加上渐变的背景颜色 ，方便演示-->
	<div class="outside_box">
		<div class="inside_box"></div>
	</div>
</body>
</html>

如果上面的一段觉得太繁琐，就只看以下三行就好
IE下隐藏滚动条：-ms-overflow-style:none;
火狐下隐藏滚动条： scrollbar-width: none;
谷歌, 苹果，欧朋下隐藏滚动条： element::-webkit-scrollbar {display:none}

judy_1118

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css隐藏滚动条又可以滚动

css隐藏滚动条又可以滚动（亲测有效）前几天因为隐藏滚动条又得能滚动这个功能搜了挺长时间，本来就用的iframe，两个滚动条真的丑爆了！后来看好多帖子再加上帖子下面的回帖各种试才整出来，今天又整理了一下，先写上省得自己下次又忘了<!DOCTYPE html><html><head> <title></title> <st...
复制链接

扫一扫