最佳解决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);//Firefoxheight: 100%;//Firefox-ms-overflow-style: none;//IEoverflow: 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>