How do I remove a small white square under the scrollbar track in HTML?

De_m1l3t0
May 16, 2023
232 views
0 votes
2 Answers

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

I made this code for a scrollbar in css and the scrollbar works perfectly, but for some reason that I don’t know there is a small white square just below the scrollbar.

Here is a link to the entire project in case anyone thinks the problem may be resulting from elsewhere in the code.

I can’t think of anything i haven’t tried to solve this.

Answers

- GLawog
- May 16, 2023 at 1:05 pm
- 0 votes
0
That’s because you have "overflow:scroll" for both axis – horizontal and vertical, this little white square is their interception.

Replace with
```
overflow-y:scroll
```
thus, no need for
```
::-webkit-scrollbar-track:horizontal{
   display: none;
}
```
Login or Signup to reply.

According to the W3 doc:

For a scrollable bar, use the x and y-axis. Set the overflow-x: hidden; and overflow-y: auto; to automatically hide the horizontal scrollbar and show a vertical scrollbar.

The MDN web docs about the overflow-y:

The overflow-y CSS property sets what shows when content overflows a block-level element’s top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property.

The Overflow Property (where you can see the same issue you’re having) compared to The overflow-y Property. In your case, just set a line like this:

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

The following snippet shows this property in action:

const botaoAlterarTema = document.getElementById("botao-alterar-tema");
const body = document.querySelector("body");
const imagemBotaoTrocaDeTema = document.querySelector(".imagem-botao");

botaoAlterarTema.addEventListener("click", () => {
  const modoEscuroEstaAtivo = body.classList.contains("modo-escuro");

  body.classList.toggle("modo-escuro");

  if (modoEscuroEstaAtivo) {
    imagemBotaoTrocaDeTema.setAttribute("src", "./src/imagens/sun.png");
  } else {
    imagemBotaoTrocaDeTema.setAttribute("src", "./src/imagens/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.modo-escuro{
    background-color: #212121;
    color: #f5f5f5;
}

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

header .logo,
header .imagem-botao{
    width: 1.875rem;
    transition: 0.2s ease-in-out;
}

header #botao-alterar-tema{
    background: none;
    border: none;
}

header .logo:hover,
header .imagem-botao:hover,
main .cartao-pokemon:hover{
    transform: scale(1.05);
    cursor: pointer;
}

main{
    padding: 1.5625rem;
}

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

main .cartao-pokemon{
    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 .cartao-pokemon:hover{
    background-color: #96d9d6;
}

.modo-escuro .cartao-pokemon {
    background-color: #a8a8a8;
}

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

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

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

main .cartao-pokemon .tipos {
    display: flex;
    gap: 0.9375rem;
}
  
main .cartao-pokemon .tipo{
    padding: 0.5rem;
    border-radius: 10px;
}

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

.veneno{
    background-color: #b97fc9;
}

.fogo{
    background-color: #fd7d24;
}

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

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

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

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

.eletrico{
    background-color: #eed535;
}

.terrestre{
    background-color: #ab9842;
}

.fada{
    background-color: #fdb9e9;
}

main .descricao {
    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/imagens/pokeball.png" 
        alt="pokebola" 
        class="logo">
    </a>
    <button id="botao-alterar-tema">
        <img src="./src/imagens/sun.png" 
        alt="imagem do sol" 
        class="imagem-botao">
    </button>
</header>
<main>
    <ul class="listagem-pokemon">
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Bulbasaur</span>
                <span>#0001</span>
            </div>

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

            <ul class="tipos">
                <li class="tipo grama">Grama</li>
                <li class="tipo veneno">Veneno</li>
            </ul>

            <p class="descricao">Há uma semente de planta em suas costas desde o dia que este Pokémon nasce. A semente cresce lentamente.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Ivysaur</span>
                <span>#0002</span>
            </div>

            <img src="./src/imagens/ivysaur.gif" alt="Ivysaur" class="gif">

            <ul class="tipos">
                <li class="tipo grama">Grama</li>
                <li class="tipo veneno">Veneno</li>
            </ul>

            <p class="descricao">Quando o bulbo em suas costas cresce, parece perder a capacidade de ficar de pé em suas patas traseiras.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Venusaur</span>
                <span>#0003</span>
            </div>

            <img src="./src/imagens/venusaur.gif" alt="Ivysaur" class="gif">

            <ul class="tipos">
                <li class="tipo grama">Grama</li>
                <li class="tipo veneno">Veneno</li>
            </ul>

            <p class="descricao">Sua planta floresce quando está absorvendo energia solar. Ele permanesce em movimento para buscar luz solar.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Charmander</span>
                <span>#0004</span>
            </div>

            <img src="./src/imagens/charmander.gif" alt="charmander" class="gif">

            <ul class="tipos">
                <li class="tipo fogo">Fogo</li>
            </ul>

            <p class="descricao">Tem uma preferência por coisas quentes. Quando chove, vapor pode ser visto saindo da ponta da sua cauda</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Charmeleon</span>
                <span>#0005</span>
            </div>

            <img src="./src/imagens/charmeleon.gif" alt="charmeleon" class="gif">

            <ul class="tipos">
                <li class="tipo fogo">Fogo</li>
            </ul>

            <p class="descricao">Tem uma natureza bárbara. Em batalha, ele chicoteia sua cauda de fogo e corta com garras afiadas.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Charizard</span>
                <span>#0006</span>
            </div>

            <img src="./src/imagens/charizard.gif" alt="charizard" class="gif">

            <ul class="tipos">
                <li class="tipo fogo">Fogo</li>
                <li class="tipo voador">Voador</li>
            </ul>

            <p class="descricao">Ele cospe fogo que é quente o suficiente para derreter pedras. Pode causar incêndios florestais soprando chamas.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Squirtle</span>
                <span>#0007</span>
            </div>

            <img src="./src/imagens/squirtle.gif" alt="squirtle" class="gif">

            <ul class="tipos">
                <li class="tipo agua">Água</li>
            </ul>

            <p class="descricao">Quando retrai seu longo pescoço em sua concha, esguicha água com força vigorosa.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Wartortle</span>
                <span>#0008</span>
            </div>

            <img src="./src/imagens/wartortle.gif" alt="wartortle" class="gif">

            <ul class="tipos">
                <li class="tipo agua">Água</li>
            </ul>

            <p class="descricao">É reconhecido como um símbolo de longevidade. Se sua casca tiver algas, aquele Wartortle é muito velho.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Blastoise</span>
                <span>#0009</span>
            </div>

            <img src="./src/imagens/blastoise.gif" alt="blastoise" class="gif">

            <ul class="tipos">
                <li class="tipo agua">Água</li>
            </ul>

            <p class="descricao">Ele esmaga seu inimigo sob seu corpo pesado para causar desmaios. Em um piscar de olhos, ele se retirará para dentro de sua casca.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Caterpie</span>
                <span>#0010</span>
            </div>

            <img src="./src/imagens/caterpie.gif" alt="caterpie" class="gif">

            <ul class="tipos">
                <li class="tipo inseto">Inseto</li>
            </ul>

            <p class="descricao">Para proteção, ele libera um fedor horrível da antena em sua cabeça para afastar os inimigos.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Metapod</span>
                <span>#0011</span>
            </div>

            <img src="./src/imagens/metapod.gif" alt="metapod" class="gif">

            <ul class="tipos">
                <li class="tipo inseto">Inseto</li>
            </ul>

            <p class="descricao">Está esperando o momento de evoluir. Nesta fase, só pode endurecer, por isso permanece imóvel para evitar o ataque.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Butterfree</span>
                <span>#0012</span>
            </div>

            <img src="./src/imagens/butterfree.gif" alt="butterfree" class="gif">

            <ul class="tipos">
                <li class="tipo inseto">Inseto</li>
                <li class="tipo voador">Voador</li>
            </ul>

            <p class="descricao">Em batalha, ele bate as asas em grande velocidade para liberar poeira altamente tóxica no ar.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Weedle</span>
                <span>#0013</span>
            </div>

            <img src="./src/imagens/weedle.gif" alt="weedle" class="gif">

            <ul class="tipos">
                <li class="tipo inseto">Inseto</li>
                <li class="tipo veneno">Veneno</li>
            </ul>

            <p class="descricao">Cuidado com o ferrão afiado em sua cabeça. Ele se esconde na grama e nos arbustos onde come folhas.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Kakuna</span>
                <span>#0014</span>
            </div>

            <img src="./src/imagens/kakuna.gif" alt="kakuna" class="gif">

            <ul class="tipos">
                <li class="tipo inseto">Inseto</li>
                <li class="tipo veneno">Veneno</li>
            </ul>

            <p class="descricao">Capaz de se mover apenas ligeiramente. Quando em perigo, pode mostrar seu ferrão e envenenar seu inimigo.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Beedril</span>
                <span>#0015</span>
            </div>

            <img src="./src/imagens/beedril.gif" alt="beedril" class="gif">

            <ul class="tipos">
                <li class="tipo inseto">Inseto</li>
                <li class="tipo veneno">Veneno</li>
            </ul>

            <p class="descricao">Tem três ferrões venenosos nas patas dianteiras e na cauda. Eles são usados para espetar seu inimigo repetidamente.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Pidgey</span>
                <span>#0016</span>
            </div>

            <img src="./src/imagens/pidgey.gif" alt="pidgey" class="gif">

            <ul class="tipos">
                <li class="tipo normal">Normal</li>
                <li class="tipo voador">Voador</li>
            </ul>

            <p class="descricao">Muito dócil. Se atacado, muitas vezes chuta areia para se proteger, em vez de revidar.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Pidgeotto</span>
                <span>#0017</span>
            </div>

            <img src="./src/imagens/pidgeotto.gif" alt="pidgeotto" class="gif">

            <ul class="tipos">
                <li class="tipo normal">Normal</li>
                <li class="tipo voador">Voador</li>
            </ul>

            <p class="descricao">Este Pokémon está cheio de vitalidade. Ele voa constantemente em torno de seu grande território em busca de presas.</p>
        </li>
        <li class="cartao-pokemon">
            <div class="informacoes">
                <span>Pigeot</span>
                <span>#0018</span>
            </div>

            <img src="./src/imagens/pigeot.gif" alt="pigeot" class="gif">

            <ul class="tipos">
                <li class="tipo normal">Normal</li>
                <li class="tipo voador">Voador</li>
            </ul>

            <p class="descricao">Este Pokémon voa na velocidade de Mach 2, buscando presas. Suas grandes garras são temidas como armas perversas.</p>
        </li>
    </ul>
</main>

Please signup or login to give your own answer.

Click here to cancel reply.