最佳解决Css一隐藏滚动条

我叫汪枫

已于 2024-03-25 16:48:23 修改

阅读量451

点赞数 4

文章标签： css 前端

于 2024-01-31 21:18:10 首次发布

本文链接：https://blog.csdn.net/weixin_47121832/article/details/135962335

版权

本文介绍了三种不同的CSS技术来隐藏滚动条，包括设置外层容器的`overflow`属性、使用绝对定位和负宽度，以及针对不同浏览器的兼容解决方案。

摘要由CSDN通过智能技术生成

最佳解决Css一隐藏滚动条

方法一：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <style>
		.element, .outer-container {
		 width: 350px;
		 height: 200px;
		}
		 
		.outer-container {
		 position: relative;
		 overflow: hidden;
		}
		 
		.inner-container {
		 position: absolute;
		 overflow-y: scroll;
		}
		 
		
  </style>
  <body>
	   <div class="outer-container">
		 <div class="inner-container">
		 <div class="element">
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
		 </div>
			</div>
		 </div>
	 </div>
  </body>
</html>

方法二：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <style>	 
		.outer-container{
			width: 360px;
			height: 200px;
			position: relative;
			overflow: hidden;
		}
		.inner-container{
			position: absolute;
			left: 0;
			top: 0;
			right: -17px;
			bottom: 0;
			overflow-x: hidden;
			overflow-y: scroll;
		}	
  </style>
  <body>
	   <div class="outer-container">
		 <div class="inner-container">
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
			壮士不留名，留名非壮士。壮士留种不留名！</br>
		 </div>
	 </div>
  </body>
</html>

方法三：（最牛逼的）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <style>	 
		html {
			overflow: -moz-hidden-unscrollable;
			height: 100%;
		}

		body::-webkit-scrollbar {
			display: none;//Chorme
		}

		body {
			width: calc(100vw + 18px);//Firefox
			height: 100%;//Firefox
			-ms-overflow-style: none;//IE
			overflow: auto;Firefox
		}
  </style>
  <body>
	   <div class="outer-container">
		 <div class="inner-container">
			<script>
				for(var i=0;i<200;i++)

				{

				document.write("壮士不留名，留名非壮士。壮士留种不留名！</br>")

				}
			</script>
		 </div>
	 </div>
  </body>
</html>