最佳解决Css一隐藏滚动条

最佳解决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>

方法二:



  
    
    
  
  
  
	   
"outer-container">
"inner-container"> 壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!
壮士不留名,留名非壮士。壮士留种不留名!

方法三:(最牛逼的)

<!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("壮士不留名,留名非壮士。壮士留种不留名!
"
) } </script> </div> </div> </body> </html>

你可能感兴趣的:(css,前端)