Scrollbar over content

Question

I want to make transparent scrollbar that should be placed over div with content. Only css and only webkit browsers. It must look like example. My code. The problem is that scrollbar moves content to the left. How to make it look like in example? Thank you for replies.

div{
  width:410px;
  height:100px;
  overflow-y:scroll;
  border:1px solid green;
  position:relative;
}

::-webkit-scrollbar{
  width:20px;
  position:absolute;
  right:20px;
  z-index:100;
} 

::-webkit-scrollbar-thumb{
  background-color:rgba(0,0,0,1);
  border-right:10px solid white;
}

You should include the code into your question and provide a link to a jsFiddle.net snippet. — akluth, Oct 24 '13 at 13:20
you can't do this **Only css and only webkit browsers** ! you should be use `javascript` or `jquery`.. — mehdi, Oct 24 '13 at 13:23
possible duplicate of [Custom CSS Scrollbar for Firefox](http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox) — 99tharun, Jul 19 '15 at 20:02

score 0 · Answer 1 · answered Oct 05 '15 at 16:06

0

This is very similar to the example.

::-webkit-scrollbar{
    width:7px;
} 

::-webkit-scrollbar-thumb{
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    border: 1px solid #fff;
}

otherwise you must use iscroll plugin

answered Oct 05 '15 at 16:06

Jose Luis

11
2

Scrollbar over content

1 Answers1