how to make scroll bar appear all the time?

Question

I have created a div with scroll. But scroll bar is hiding when the mouse pointer is away from the screen. Is there any possibility to show the scrollbar is showing there regardless of my mouse is hovering or no.?? I tried it with Mozilla Firefox and chrome.

when you begin to scroll the scroll bar is appear. After you finish it will disappear.

.scroll-div{

width:200px;
  height:100px;
  overflow-y:scroll;
}
.scroll-div::-webkit-scrollbar { 
  /* This is the magic bit */
  display: block;
}

<div class="scroll-div">
test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>test<br/>
  
  test<br/>
  test<br/>
  test<br/>
  test<br/>test<br/>
  test<br/>
  test<br/>
  test<br/>
</div>

Possible duplicate of [CSS - Overflow: Scroll; - Always show vertical scroll bar?](http://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar) — Maxime Lorant, Jan 03 '17 at 11:57

score 0 · Answer 1 · answered Jan 03 '17 at 11:48

Yo are using ::-webkit-scrollbar pseudo element which is used to style scroll. But on using it default scrollbar of browser is not displayed which is why you are not seeing it. Further, it is only supported in webkit browsers. If you want custom scrollbars you should use a javascript library like sly and other. If you want default scrollbar, you can remove this part

.scroll-div::-webkit-scrollbar { 
  /* This is the magic bit */
  display: block;
}

For more info on custom scrollbar/scrollbar styling, see this link.

score 0 · Answer 2 · answered Jan 03 '17 at 11:54

0

Try removing the display:block style and modify the css as the following.

.scroll-div{

 width:200px;
 height:100px;
 overflow-x:auto;
 overflow-y:auto;
 background-color:yellow;
}

answered Jan 03 '17 at 11:54

Poornima

11
2

Bhavin Shah · Answer 3 · 2017-01-03T12:01:41.440

0

.scroll-div{
  
  height:100px;
  overflow-y:visible;

}

<div class="scroll-div">
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>test<br/>
  
  test<br/>
  test<br/>
  test<br/>
  test<br/>test<br/>
  test<br/>
  test<br/>
  test<br/>



  test<br/>
  test<br/>
  test<br/>
  test<br/>test<br/>
  test<br/>
  test<br/>
  test<br/>


  
  test<br/>
  test<br/>
  test<br/>
  test<br/>test<br/>
  test<br/>
  test<br/>
  test<br/>
</div>

Is this the same that you are looking for?

Hope this helps.

edited Jan 03 '17 at 12:01

answered Jan 03 '17 at 11:56

Bhavin Shah

2,462
4
22
35

thanks, but this is not i am looking for you see when you start to scroll a scroll bar is appearing in the right side??. i need that bar is always shown not apprearing and disapearing – omrehman Jan 03 '17 at 11:58
thanks, but this is not i am looking for you see when you start to scroll a scroll bar is appearing in the right side??. i need that bar is always shown not apprearing and disapearin – omrehman Jan 03 '17 at 11:59

score 0 · Answer 4 · edited Jan 03 '17 at 13:19

0

<!--please use only this very code-->

.scroll-div{

  width:200px;
  height:100px;
  overflow-y:scroll;
  }

<!--don't use this one-->

.scroll-div::-webkit-scrollbar { 
  /* This is the magic bit */
  display: block;
 }

edited Jan 03 '17 at 13:19

Abhishek Gurjar

7,426
10
37
45

answered Jan 03 '17 at 11:57

Ravi Pathak

1

score 0 · Answer 5 · answered Jan 03 '17 at 12:24

0

Use this CSS code.

CSS Code

.scroll-div {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
}

.scroll-div::-webkit-scrollbar {
  /* This is the magic bit */
}

answered Jan 03 '17 at 12:24

Bhavanaditya

548
3
8
23

score 0 · Answer 6 · answered Jan 04 '17 at 06:09

0

it was the issue in system preferences thank you

answered Jan 04 '17 at 06:09

omrehman

107
3
13

score -1 · Accepted Answer · answered Jan 03 '17 at 11:43

-1

.scroll-div{

width:200px;
  height:100px;
  overflow-y:scroll;
  
}

<div class="scroll-div">
test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>
  test<br/>test<br/>
  
  test<br/>
  test<br/>
  test<br/>
  test<br/>test<br/>
  test<br/>
  test<br/>
  test<br/>
</div>

answered Jan 03 '17 at 11:43

Ivin Raj

3,448
2
28
65

1

the scroll bar button is still disappearing – omrehman Jan 03 '17 at 11:44

how to make scroll bar appear all the time?

7 Answers7