css 隐藏 scrollbar

css 隐藏 scrollbar

方案一: 兼容非 -webkit- browser(一般就是 pc端)

原理就是使用一个 wrapper overflow:hidden 掉字元素 多出来的 scrollbar 的宽度


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css隐藏 scrollbar 兼容各浏览器title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		li {
			line-height: 60px;
		}

		.wrapper {
			margin: 200px auto 0 auto;
			width: 184px;
			overflow: hidden;
		}
		.scrollbar {
			height: 200px;
			width: 200px;
			background-color: skyblue;
			overflow-x: hidden;
			overflow-y: scroll;
		}
	style>
	<script src="../jquery.js">script>
head>
<body>
	<div class="wrapper">
		<div class="scrollbar">
			<ul>
				<li>hello,worldli>
				<li>hello,worldli>
				<li>hello,worldli>
				<li>hello,worldli>
				<li>hello,worldli>
				<li>hello,worldli>
			ul>
		div>	
	div>
	<script>
		
	script>
body>
html>

方案二: -webkit- browser 可以使用下面的伪类

.element::-webkit-scrollbar {
    display:none
}

你可能感兴趣的:(css)