How do you remove the boxed that contains the scrollbar

Question

What CSS do you use to remove the box that contains scrollbar, yet leave scrollbar visible?

(Current scrollbar) I want to remove the box that contains the scrollbar, yet leave scrollbar visible

(need to look like this one) This is what I want it to look like

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

You can't remove the box of the browser's default scrollbar. I think the only way to achieve this is by using a custom scrollbar. Read this answer of how to do this: https://stackoverflow.com/a/14150577/1119533

edited May 23 '17 at 10:33

Community

1
1

answered Mar 11 '14 at 20:06

Dion

3,145
20
37

score 1 · Accepted Answer · answered Mar 11 '14 at 20:14

1

You can't do this with CSS...You will have to use custom js plugin to achieve this.

One that looks like what you shownin the image is called slimScroll

DEMO

answered Mar 11 '14 at 20:14

zoranc

2,410
1
21
34

OK thanks! I will use this! – guest Mar 11 '14 at 20:52

score 0 · Answer 3 · answered Mar 11 '14 at 20:18

I found this example without the use of JS plugin http://css-tricks.com/examples/WebKitScrollbars/

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}



/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(200,200,200,1); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(200,200,200,0.4); 
}

Safari and Chrome solution only...this won't work natively in Firefox, Opera or IE — zoranc, Mar 11 '14 at 20:27

How do you remove the boxed that contains the scrollbar

3 Answers3