Create a HTML scrollbar

Question

Is there a scrollbar element in HTML ?

If not, how can a scrollbar be created? I tried using a div with overflow but the problem is that I have to add content in order for the scrollbar to appear, and if I add content it will be visible.

CSS:

.h-scrollbar { overflow-x: scroll; width: 300px; } .h-scrollbar div { width: 1000px; display:block; }

HTML:

<div class="h-scrollbar"><div>text</div></div>

Here is a demo: http://jsfiddle.net/4e8jbbc0/1/

How can I get only the scrollbar?

possible duplicate of How to always show the vertical scrollbar in a browser? — alex
– alex, Commented Jan 22, 2015 at 13:41
@alex did you read the question? I don't want to show the scrollbar of a specific element (in the case of that question, the body). I want to create a scrollbar element so I can get the events on it. I only need the scrollbar. — XCS
– XCS, Commented Jan 22, 2015 at 13:45
If you're not asking how to get the scrollbar to show up on any arbitrary div, then your question is confusing. overflow-x: scroll and overflow-y: scroll create persistent scrollbars without adding content. There is no scrollbar element in HTML, but you could hypothetically create an HTML element and program it to act like a scrollbar. — alex
– alex, Commented Jan 22, 2015 at 13:49
Your fiddle creates a scrollbar. There is some content too, but you can remove it. The scrollbar then becomes grayed-out, simply because there is nothing to scroll. So do you want it to be active even when it is useless? — Jukka K. Korpela
– Jukka K. Korpela, Commented Jan 22, 2015 at 13:58
@JukkaK.Korpela Yes. Think about it. It's not useless if you can get the events done on that scrollbar with JavaScript :) — XCS
– XCS, Commented Jan 22, 2015 at 14:04

sankar · Accepted Answer · 2015-01-22 13:53:52Z

2

You can use the below css class to hide text and get scroll bar element only

.h-scrollbar div { width: 1000px; display:block; visibility: hidden; height:0px }

answered Jan 22, 2015 at 13:53

sankar

1611 silver badge13 bronze badges

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

4 Comments

XCS Over a year ago

Thanks for your answer. Based on it I have realised that a solution is, instead of just hidding the text, to apply height: 0px; to the content div, so the blank space isn't showing up, jsfiddle.net/4e8jbbc0/3

XCS Over a year ago

jsfiddle.net/4e8jbbc0/5 There is still a problem with the right side, you can see that there is a white square after the right arrow of the scrollbar. Do you know any fix for that?

sankar Over a year ago

Yes browser compatibility issue.works fine in Firefox.

XCS Over a year ago

I have that problem in Google Chrome.

Collectives™ on Stack Overflow

Create a HTML scrollbar

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related