CODEWITHSUNDEEP
csssass
AlwaysLearning
AlwaysLearning

Reputation: 8011

How does scrollbar become transparent?

I am trying to understand how my vertical scrollbar became transparent:

enter image description here

The relevant code is:

$background-image-with-gradient: 
    linear-gradient(
        to right top, 
        rgba(248, 12, 12, 0.235), 
        rgba(17, 226, 128, 0.235)),
        url("https://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg");

@mixin pseudo-element-background {
    content: ""; 
    background-size: cover;
    background-position: top; /* When resizing the window, the top of image stays attached to top */
    //background-attachment: fixed;
    position: absolute;
    top: 0px;
    right: 0px;
    //bottom: 0px;
    left: 0px;
    height: 100%;
    z-index: -1;
}

.outer {
  width: 30em;
}

.auth-form-frame-container {
    display: block;
    border-radius: 1em;
    box-shadow: 0 2em 4em rgba(black, 0.4);
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
}

.auth-form-frame {
    position: relative;
    padding: 1em;
    
    &:before {
        @include pseudo-element-background;
        background-image: $background-image-with-gradient;
        background-position: center;  
    }
}

<div class="outer">
<div class="auth-form-frame-container">
  <div class="auth-form-frame">
    <h1>Line 1</h1>
    <h1>Line 2</h1>
    <h1>Line 3</h1>
    <h1>Line 4</h1>
    <h1>Line 5</h1>
    <h1>Line 6</h1>
    <h1>Line 7</h1>
    <h1>Line 8</h1>
  </div> 
</div>
</div>

I substituted the input elements by h1 headers, but the actual content should be irrelevant. I have put this code into Codepen, but the scrollbar shows very nicely there:

enter image description here

What could cause the scrollbar to become transparent in my website?

Upvotes: 1

Views: 259

Answers (1)

EmielV
EmielV

Reputation: 207

There is something called ::-webkit-scrollbar, with this, you can specify properties of the scrollbar.

I created a jsfiddle where you can see how this works. JSFiddle

This is probably way out of topic, but I cannot ask any more questions because stackoverflow blocked me. I would highly appreciate it if you upvote my questions and answers so I can ask questions.

Hope I helped you out and thank you in advance!

Upvotes: 2

Related Questions