CSS - scrollable div with hidden scroll bar

Question

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>

My left navigation has a scrolling bar, I want it scrollable without a scoll bar. — Daniel Schmitt
– Daniel Schmitt, Commented Oct 27, 2017 at 23:26
Here is an example: codepen.io/JonAnderDev/pen/XJNOPr , this way work on all browthers — ferhado
– ferhado, Commented Oct 27, 2017 at 23:30

Tim Zeng · Accepted Answer · 2017-10-27 23:26:12Z

8

You can try this to hide the scrollbar.

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

answered Oct 27, 2017 at 23:26

Tim Zeng

811 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Nitneq Over a year ago

Cool ! Ok for chrome or safari, but not for Firefox.

Rob Welan · Accepted Answer · 2017-10-27 23:41:45Z

1

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.

answered Oct 27, 2017 at 23:41

Rob Welan

2,2201 gold badge15 silver badges20 bronze badges

Comments

VXp · Accepted Answer · 2017-10-27 23:35:47Z

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>

Thái An Nguyễn · Accepted Answer · 2018-11-07 12:28:55Z

0

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

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

edited Nov 7, 2018 at 12:28

answered Nov 7, 2018 at 4:28

Thái An Nguyễn

2014 silver badges10 bronze badges

Collectives™ on Stack Overflow

CSS - scrollable div with hidden scroll bar

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related