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?](http://stackoverflow.com/questions/4050076/how-to-always-show-the-vertical-scrollbar-in-a-browser) — alex, Jan 22 '15 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, Jan 22 '15 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, Jan 22 '15 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, Jan 22 '15 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, Jan 22 '15 at 14:04

score 2 · Answer 1 · answered Jan 22 '15 at 13:53

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 '15 at 13:53

sankar

161
13

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, http://jsfiddle.net/4e8jbbc0/3/ – XCS Jan 22 '15 at 13:55
http://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? – XCS Jan 22 '15 at 14:16
Yes browser compatibility issue.works fine in Firefox. – sankar Jan 22 '15 at 14:36
I have that problem in `Google Chrome`. – XCS Jan 22 '15 at 14:59

Create a HTML scrollbar

1 Answers1