How to put the scrollbar inside the body?

Question

How to put the scrollbar inside the body?

Navigation

#1 by (4 votes)

8

I styled the scrollbar of my website for webkit, and I put the background of the track as transparent, however I would like the thumb to overlap the body content, simulating a position absolute effect, and the body 100% without leaving the padding to the track, how can I do this? Example of how it is:

Iwouldlikethebodytooccupytheentirelengthofthewindow,occupyingtheinclusivespaceofthetracktolooklikethis:

AlthoughthecodethatMarcosHenzelworkedwellhere,forsomereasondidnotworkonthesite,soImadea"hackzinho" to get 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;
}

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

html css rolamento

asked by anonymous 15.12.2016 / 14:16

1 answer

How to read data from the MySQL database of an application in C #? Is it possible to include elements in the DOM after it is loaded and ready?

score 4 · Accepted Answer

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;
     }

Depending on the snippet, open 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>