How to put the scrollbar inside the body?

Asked

Viewed 713 times

8

I stylized the scrollbar of my site for Webkit, and I put the background of the track as Transparent, but I would like Thumb to overlap with the body content, simulating a position effect Absolute, and the body 100% without leaving the padding for the track, how can I do this? Example of how it is:

inserir a descrição da imagem aqui

I would like the body to take up the whole length of the window, taking up even the track space to look like this:

inserir a descrição da imagem aqui

Although the code that Marcos Henzel worked right here, for some reason did not work on the site, so I did a "hackzinho" to achieve the effect I wanted and the code was as follows:

body{
    width:100%;
    height:100%;
    position:absolute;
    overflow-y:scroll;
    background-color:#312d28;   
    font-family:'Ebrima';
    margin:10px;
    top:-10px;
    left:-10px;
    padding-right:14px;
} 
body::-webkit-scrollbar {
     width: 14px;
}
body::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.7);
}
body::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
body::-webkit-scrollbar-corner {
    background-color: transparent;
}

This way I get the effect exactly the same as the example image. Applying a margin to the body and then pulling it back with the properties left and top and then put a padding-right to pull the body in the space that the scrollbar occupies. Image below:

inserir a descrição da imagem aqui

html css rolling

  • I think just put the background color of the Transparent bar, it doesn’t look like it is. Has the site on the air or a fiddle ?

  • the track is already with the transparent background

  • Put the code...

  • The site looks like this: http://www.bluanime.com/v2/browse

  • Enter your code...

  • @Magichat put the css in the question

  • you don’t want your scroll bar to hit the edge that’s it?

  • I want the scrollbar above the body, so that the body occupies 100% of the screen space, the real 100% including the space that the scrollbar should use

  • 2

    Do not change the question with solution, you can post your finished version as answer, and keep the one you solved as accepted.

Show 4 more comments

1 answer

4


For Webkit browsers (Chrome, Safari, Opera 15+):

    ::-webkit-scrollbar              { /* 1 */ }
    ::-webkit-scrollbar-button       { /* 2 */ }
    ::-webkit-scrollbar-track        { /* 3 */ }
    ::-webkit-scrollbar-track-piece  { /* 4 */ }
    ::-webkit-scrollbar-thumb        { /* 5 */ }
    ::-webkit-scrollbar-corner       { /* 6 */ }
    ::-webkit-resizer                { /* 7 */ }

To create a scrollbar exactly like your question would be something like this:

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

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

    ::webkit-scrollbar-thumb {
        background: #dad7d7;
     }

According to the snippet, open in the Chrome Browser ...

.container {
    height:200px;
    overflow: auto;
    width: 200px;
    border-bottom: 1px solid #D4D4D4;
    background-color: blue;
}

.container::-webkit-scrollbar-track {
    background-color: transparent;
}
.container::-webkit-scrollbar {
    width: 10px;
}
.container::-webkit-scrollbar-thumb {
    background: #dad7d7;
}
<div class="container">
    <div class="content" style="height:600px;">fdsf</div>
</div>

Browser other questions tagged html css rolling

You are not signed in. Login or sign up in order to post.