html - CSS - 带有隐藏滚动条的可滚动 div

Question

如果没有滚动条，我将无法使用导航滚动条。

我在这里找到了很多示例，但它们不起作用。

我厌倦了溢出的父类:隐藏；和带有 overflow-y 的子类:auto；

有人知道我的 CSS 有什么问题吗？

................................................ .....................................

这是片段:

html, body {
		background-color: #111111;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		color: #fff;
		font : 12px Arial,Courier New,Tahoma;
}

.layoutWrapper {
		width: 100%;
		height: 100%;
		display: flex;
			
}

.layoutHead {
		width: 100%;
		height: 200px;
		background-color: #171616;
		color: #444;
		line-height: 200px;
		font-size: 100px;
		text-align: center;
}

.layoutNav {
		background-color: #333333;
		width: 250px;
		height: 100%;
		overflow: hidden;
}

.layoutNavWrapper {
		width: 250px;
		height: 100%;
		overflow-y: scroll;
}

.layoutNavWrapper ul {
		width: 240px;
		padding: 0;
		margin: 0 0 0 5px;
}

.layoutNavWrapper ul li {
		width: 240px;
		height: 40px;
		line-height: 40px;
		margin: 5px 0 0 0;
		list-style-type: none;
}

.layoutNavWrapper ul li a {
		color: #e8ecf3;
		background: #212020 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWMICAhoYCAK4FQJAH+kAuF/Y9FHAAAAAElFTkSuQmCC) repeat;
		text-decoration: none;
		display: block;
		width: 220px;
		height: 40px;	
		padding-left: 20px;
}

.layoutNavWrapper ul li a:hover {
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWPIzc31ZSAK4FQJAI0YAylSFqZ7AAAAAElFTkSuQmCC) repeat;
		-webkit-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
		-moz-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
		box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
}

.layoutContent {
		display: inline-block;
		width: calc(100% - 250px);
		height: 100%;		
}

	<div class="layoutWrapper">
	
		<div class="layoutNav">
			<div class="layoutNavWrapper">
				<ul>
					<li>
						<a href="">Startseite</a>
					</li>
					<li>
						<a href="">Mein Profil</a>
					</li>
					<li>
						<a href="">Profil bearbeiten</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>
					<li>
						<a href="">Platzhalter</a>
					</li>					
				</ul>

			</div>
		</div>
		<div class="layoutContent">
			<div class="layoutHead">
				>_ Keyboard Hobby 
			</div>
		</div>
	</div>
	
	

Answer 1

你可以试试这个来隐藏滚动条。

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