How can I eliminate the tiny white square located beneath the scrollbar track?

Question

How can I eliminate the tiny white square located beneath the scrollbar track?

`::-webkit-scrollbar{
    width: 12px;
}

body::-webkit-scrollbar-track{
    background: #f1e9e9;
    border-radius: 10px;
    margin-block: 0.1875rem;
}

::-webkit-scrollbar-thumb{
    background-color: #582965;
    border-radius: 10px;
    border: 3px solid #ffffff;
}

::-webkit-scrollbar-thumb:hover{
    background-color: #40144d;
}

::-webkit-scrollbar-track:horizontal{
    display: none;
}`

This snippet of code was created to style a scrollbar in CSS and despite its functionality, an inexplicable white square appears below the scrollbar. Any insights or suggestions on how to troubleshoot this issue would be greatly appreciated. For those interested in delving deeper into the project's codebase, feel free to visit this link.

Here is an image depicting the issue:

I have exhausted all possible solutions that come to mind, but the problem persists.

html css scrollbar

Answer 1

Answer №1

Due to the presence of "overflow:scroll" for both horizontal and vertical axes, a small white square appears where they intersect.

Instead, use

overflow-y:scroll

and eliminate the need for

::-webkit-scrollbar-track:horizontal{
   display: none;
}

Answer 2

Due to the presence of "overflow:scroll" for both horizontal and vertical axes, a small white square appears where they intersect.

Instead, use

overflow-y:scroll

and eliminate the need for

::-webkit-scrollbar-track:horizontal{
   display: none;
}

Answer 3

Answer №2

The intersection of both scrollbars creates the corner on a webpage. If you have enabled scrolling in both directions, this corner will be visible. In browsers that support WebKit, you can customize the appearance of this corner using CSS.

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

::-webkit-scrollbar-corner {
    /* Set the background color to yellow for visibility */
    background-color: yellow ;
}

<div style="width:200px; height:200px; overflow:auto;background-color:red">
    <div style="height:500px; width:200px; background-color:blue"></div>
</div>

Answer 4

The intersection of both scrollbars creates the corner on a webpage. If you have enabled scrolling in both directions, this corner will be visible. In browsers that support WebKit, you can customize the appearance of this corner using CSS.

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

::-webkit-scrollbar-corner {
    /* Set the background color to yellow for visibility */
    background-color: yellow ;
}

<div style="width:200px; height:200px; overflow:auto;background-color:red">
    <div style="height:500px; width:200px; background-color:blue"></div>
</div>

Answer 5

Answer №3

When it comes to creating a vertically scrollable div, the W3 doc suggests:

To achieve a scrollable bar, utilize the x and y-axis. Set overflow-x: hidden; and overflow-y: auto; to hide the horizontal scrollbar while showing the vertical one automatically.

The information provided by the MDN web docs on overflow-y is as follows:

The overflow-y CSS property determines how content appears when it overflows a block-level element's top and bottom edges. It can be nothing, a scroll bar, or the overflowing content itself. This property can also be specified using the overflow shorthand property.

Looking at The Overflow Property (which showcases a similar issue you might be facing) versus The overflow-y Property. To address your specific case, simply add a line like this:

main .description {
max-height: 5rem;
font-size: 14px;
padding-right: 0.625rem;
overflow-y: scroll; /****----- allow vertical scroll only -----****/
}

The code snippet below demonstrates how this property works in practice:

const toggleThemeButton = document.getElementById("theme-toggle-button");
const body = document.querySelector("body");
const themeToggleButtonImage = document.querySelector(".toggle-button-image");

toggleThemeButton.addEventListener("click", () => {
  const darkModeActive = body.classList.contains("dark-mode");

  body.classList.toggle("dark-mode");

  if (darkModeActive) {
    themeToggleButtonImage.setAttribute("src", "./src/images/sun.png");
  } else {
    themeToggleButtonImage.setAttribute("src", "./src/images/moon.png");
  }
});

/****----- RESET -----****/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul{
    list-style: none;
}

/****----- MAIN -----****/

body{
    font-family: 'Poppins', sans-serif;
    max-width: 80rem;
    margin: 0 auto 0 auto;
    background-color: #5e5b5bad;
    color: #333333;
}
body.dark-mode{
    background-color: #212121;
    color: #f5f5f5;
}

header{
    display: flex;
    justify-content: space-between;
    padding: 1.5625rem;
}

header .logo,
header .toggle-button-image{
    width: 1.875rem;
    transition: 0.2s ease-in-out;
}

header #theme-toggle-button{
    background: none;
    border: none;
}

header .logo:hover,
header .toggle-button-image:hover,
main .pokemon-card:hover{
    transform: scale(1.05);
    cursor: pointer;
}

main{
    padding: 1.5625rem;
}

main .pokemon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
    justify-content: center;
}

main .pokemon-card{
    background-color: #d8e3ec;
    width: 12.5rem;
    padding: 0.9375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9375rem;
    border-radius: 15px;
    transition: 0.2s ease-in-out;
}

main .pokemon-card:hover{
    background-color: #96d9d6;
}

.dark-mode .pokemon-card {
    background-color: #a8a8a8;
}

main .pokemon-card .information{
    display: flex;
    justify-content: space-between;
    border: 0.0625rem solid #333333;
    border-radius: 10px;
}

main .pokemon-card .gif{
    width: 60px;
    height: 60px;
}

main .pokemon-card .information span{
    padding: 0.3125rem;
    text-transform: uppercase;
    font-size: 1.0625rem;
}

main .pokemon-card .types {
    display: flex;
    gap: 0.9375rem;
}
  
main .pokemon-card .type{
    padding: 0.5rem;
    border-radius: 10px;
}

.grass{
    background-color: #9bcc50;
}

.poison{
    background-color: #b97fc9;
}

.fire{
    background-color: #fd7d24;
}

.water{
    background-color: #4592c4;
}

.flying{
    background-color: #3dc7ef;
}

.bug{
    background-color: #729f3f;
}

.normal{
    background-color: #83898b;
}

.electric{
    background-color: #eed535;
}

.ground{
    background-color: #ab9842;
}

.fairy{
    background-color: #fdb9e9;
}

main .description {
    max-height: 5rem;
    font-size: 14px;
    padding-right: 0.625rem;
    overflow-y: scroll; /****----- authorize vertical scroll only -----****/
}

/****----- SCROLLBAR -----****/

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

body::-webkit-scrollbar-track {
    background: #d8e3ec;
    border-radius: 10px;
    margin-block: 0.1875rem;
}

::-webkit-scrollbar-thumb{
    background-color: #582965;
    border-radius: 10px;
    border: 3px solid #ffffff;
}

::-webkit-scrollbar-thumb:hover{
    background-color: #40144d;
}

::-webkit-scrollbar-track:horizontal{
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <a href="https://www.pokemon.com/br/pokedex/" target="_blank">
        <img src="./src/images/pokeball.png" 
        alt="pokeball" 
        class="logo">
    </a>
    <button id="theme-toggle-button">
        <img src="./src/images/sun.png" 
        alt="sun image" 
        class="toggle-button-image">
    </button>
</header>
<main>
    <ul class="pokemon-list">
        <li class="pokemon-card">
            <div class="information">
                <span>Bulbasaur</span>
                <span>#0001</span>
            </div>

            <img src="./src/images/bulbasaur.gif" alt="Bulbasaur" class="gif">

            <ul class="types">
                <li class="type grass">Grass</li>
                <li class="type poison">Poison</li>
            </ul>

            <p class="description">There is a plant seed on its back since the day this Pokémon was born. The seed grows slowly.</p>
        </li>
       <!-- More Pokemon cards go here -->
    </ul>
</main>

Answer 6

When it comes to creating a vertically scrollable div, the W3 doc suggests:

To achieve a scrollable bar, utilize the x and y-axis. Set overflow-x: hidden; and overflow-y: auto; to hide the horizontal scrollbar while showing the vertical one automatically.

The information provided by the MDN web docs on overflow-y is as follows:

The overflow-y CSS property determines how content appears when it overflows a block-level element's top and bottom edges. It can be nothing, a scroll bar, or the overflowing content itself. This property can also be specified using the overflow shorthand property.

Looking at The Overflow Property (which showcases a similar issue you might be facing) versus The overflow-y Property. To address your specific case, simply add a line like this:

main .description {
max-height: 5rem;
font-size: 14px;
padding-right: 0.625rem;
overflow-y: scroll; /****----- allow vertical scroll only -----****/
}

The code snippet below demonstrates how this property works in practice:

const toggleThemeButton = document.getElementById("theme-toggle-button");
const body = document.querySelector("body");
const themeToggleButtonImage = document.querySelector(".toggle-button-image");

toggleThemeButton.addEventListener("click", () => {
  const darkModeActive = body.classList.contains("dark-mode");

  body.classList.toggle("dark-mode");

  if (darkModeActive) {
    themeToggleButtonImage.setAttribute("src", "./src/images/sun.png");
  } else {
    themeToggleButtonImage.setAttribute("src", "./src/images/moon.png");
  }
});

/****----- RESET -----****/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul{
    list-style: none;
}

/****----- MAIN -----****/

body{
    font-family: 'Poppins', sans-serif;
    max-width: 80rem;
    margin: 0 auto 0 auto;
    background-color: #5e5b5bad;
    color: #333333;
}
body.dark-mode{
    background-color: #212121;
    color: #f5f5f5;
}

header{
    display: flex;
    justify-content: space-between;
    padding: 1.5625rem;
}

header .logo,
header .toggle-button-image{
    width: 1.875rem;
    transition: 0.2s ease-in-out;
}

header #theme-toggle-button{
    background: none;
    border: none;
}

header .logo:hover,
header .toggle-button-image:hover,
main .pokemon-card:hover{
    transform: scale(1.05);
    cursor: pointer;
}

main{
    padding: 1.5625rem;
}

main .pokemon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
    justify-content: center;
}

main .pokemon-card{
    background-color: #d8e3ec;
    width: 12.5rem;
    padding: 0.9375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9375rem;
    border-radius: 15px;
    transition: 0.2s ease-in-out;
}

main .pokemon-card:hover{
    background-color: #96d9d6;
}

.dark-mode .pokemon-card {
    background-color: #a8a8a8;
}

main .pokemon-card .information{
    display: flex;
    justify-content: space-between;
    border: 0.0625rem solid #333333;
    border-radius: 10px;
}

main .pokemon-card .gif{
    width: 60px;
    height: 60px;
}

main .pokemon-card .information span{
    padding: 0.3125rem;
    text-transform: uppercase;
    font-size: 1.0625rem;
}

main .pokemon-card .types {
    display: flex;
    gap: 0.9375rem;
}
  
main .pokemon-card .type{
    padding: 0.5rem;
    border-radius: 10px;
}

.grass{
    background-color: #9bcc50;
}

.poison{
    background-color: #b97fc9;
}

.fire{
    background-color: #fd7d24;
}

.water{
    background-color: #4592c4;
}

.flying{
    background-color: #3dc7ef;
}

.bug{
    background-color: #729f3f;
}

.normal{
    background-color: #83898b;
}

.electric{
    background-color: #eed535;
}

.ground{
    background-color: #ab9842;
}

.fairy{
    background-color: #fdb9e9;
}

main .description {
    max-height: 5rem;
    font-size: 14px;
    padding-right: 0.625rem;
    overflow-y: scroll; /****----- authorize vertical scroll only -----****/
}

/****----- SCROLLBAR -----****/

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

body::-webkit-scrollbar-track {
    background: #d8e3ec;
    border-radius: 10px;
    margin-block: 0.1875rem;
}

::-webkit-scrollbar-thumb{
    background-color: #582965;
    border-radius: 10px;
    border: 3px solid #ffffff;
}

::-webkit-scrollbar-thumb:hover{
    background-color: #40144d;
}

::-webkit-scrollbar-track:horizontal{
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <a href="https://www.pokemon.com/br/pokedex/" target="_blank">
        <img src="./src/images/pokeball.png" 
        alt="pokeball" 
        class="logo">
    </a>
    <button id="theme-toggle-button">
        <img src="./src/images/sun.png" 
        alt="sun image" 
        class="toggle-button-image">
    </button>
</header>
<main>
    <ul class="pokemon-list">
        <li class="pokemon-card">
            <div class="information">
                <span>Bulbasaur</span>
                <span>#0001</span>
            </div>

            <img src="./src/images/bulbasaur.gif" alt="Bulbasaur" class="gif">

            <ul class="types">
                <li class="type grass">Grass</li>
                <li class="type poison">Poison</li>
            </ul>

            <p class="description">There is a plant seed on its back since the day this Pokémon was born. The seed grows slowly.</p>
        </li>
       <!-- More Pokemon cards go here -->
    </ul>
</main>

How can I eliminate the tiny white square located beneath the scrollbar track?

Answer №1

Answer №2

Answer №3

Similar questions

What causes offsetHeight to be less than clientHeight?

Struggling with dynamically updating fields based on user input in real time

CSS - fixed table headers

What is causing my JS/JQuery code to only function in the console of a web browser?

"Troubleshooting: Click counter in HTML/Javascript unable to function

When a table cell is hovered over, a left border will be added

Running a Node.js child process upon clicking an HTML button

How to implement jquery select functionality on clickable table rows?

How can I add content using HTML or JavaScript?

Utilize JSON data fetched from a URL to dynamically populate an HTML content

Is it possible to redirect my PDF File to my PHP homepage?

After clicking the submit button, how can I eliminate the following: "config.php?username=++psw&Text=psw&submit=send?" and remain on the same page?

The Jquery function .load() doesn't load HTML comment tags as expected

"Engaging with the touchscreen inhibits the triggering of click

Tips for incorporating a visible HTML comment in JSX code?

Creating an HTML Canvas using an AngularJS template

Is there a method in PHP to conceal HTML code?

Embedding a YouTube video in a view player using HTML5

Should pages be indexed to index.php or should the top and bottom parts of the page be created and included in all content pages?

FlexNav excluding