隐藏浏览器自带滚动条方法

雨轩and贝贝

已于 2022-09-28 17:01:48 修改

阅读量2.7k

点赞数 2

分类专栏： CSS 文章标签： safari firefox chrome

于 2022-09-28 16:58:19 首次发布

本文链接：https://blog.csdn.net/yuxuanbeibei/article/details/127091959

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.Chrome | Safari

2.Firefox

3.IE | Edge

有时候，无论内容是否超出都不显示，我们需要隐藏浏览器的默认滚动条，如下图

1.Chrome | Safari

谷歌与苹果自带浏览器，隐藏浏览器自带滚动条：

*::-webkit-scrollbar {
	display: none;
}

2.Firefox

火狐浏览器，隐藏浏览器自带滚动条：

* {
	scrollbar-width: none;
}

3.IE | Edge

IE 与微软浏览器，隐藏浏览器自带滚动条：

* {
	-ms-overflow-style: none;
}

demo

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>隐藏浏览器自带滚动条</title>
  <style>
	/* 谷歌与苹果自带浏览器 隐藏浏览器自带滚动条 */
	*::-webkit-scrollbar {
		display: none;
	}
	/* 火狐浏览器 隐藏浏览器自带滚动条 */
	* {
		scrollbar-width: none;
	}
	/* IE 与微软浏览器 隐藏浏览器自带滚动条 */
	* {
		-ms-overflow-style: none;
	}
  </style>
 </head>
 <body>
	<div style="height:800px">隐藏浏览器自带滚动条</div> 
 </body>
</html>

实现效果对比

滚动条未隐藏前页面