CODEWITHSUNDEEP
htmlcssscrolloverflowhidden
Daniel Schmitt
Daniel Schmitt

Reputation: 35

CSS - scrollable div with hidden scroll bar

I can't get my navigation scroll to work without scroll bars.

I found many examples here, but they are not working.

I tired parent class with overflow: hidden; and child class with overflow-y: auto;

Does anybody knows what's wrong in my CSS?

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

Here is the snippet: 

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>

Upvotes: 2

Views: 12982

Answers (4)

Th&#225;i An Nguyễn
Th&#225;i An Nguyễn

Reputation: 201

For Firefox quantum: .your-class{ scrollbar-color: transparent transparent; }

For Safari, Chrome: ::-webkit-scrollbar { display: none; }

Upvotes: 0

Rob Welan
Rob Welan

Reputation: 2210

Here is a previous answer: Hide scroll bar, but while still being able to scroll.

To fix yours, I've adapted the above answer thus: 

.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 */
}

Here is a working pen.

Upvotes: 1

VXp
VXp

Reputation: 12118

You just need to add some padding-right in order to hide the scroll-bars.

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>

Upvotes: 0

Tim Zeng
Tim Zeng

Reputation: 81

You can try this to hide the scrollbar.

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

Upvotes: 8

Related Questions