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

时间：2017-10-27 23:19:28

标签： html css scroll overflow hidden

如果没有滚动条，我的导航滚动无法正常工作。

我在这里找到了很多例子，但它们没有用。

我厌倦了溢出的父类：隐藏;和子类，溢出-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>

4 个答案:

答案 0 :(得分：3)

您可以尝试此操作来隐藏滚动条。

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

答案 1 :(得分：1)

以上是上一个答案：Hide scroll bar, but while still being able to scroll。

为了解决你问题，我已经适应了上述答案：

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

.layoutNavWrapper {
		width: 250px;
		height: 100%;
		overflow-y: scroll;
        overflow-x: hidden;
        padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}
＆＃13;
＆＃13;
＆＃13;

这是一个有效的pen。

答案 2 :(得分：0)

您只需添加一些padding-right即可隐藏滚动条。

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%;
    padding-right: 15px; /* added */
		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>

答案 3 :(得分：0)

对于Firefox Quantum：   .your-class{ scrollbar-color: transparent transparent; }

对于Safari，Chrome：   ::-webkit-scrollbar { display: none; }

相关问题
最新问题