css 如何删除滚动条轨道下的白色方块？

根据W3 doc：
对于可滚动条，请使用x和y轴。设置溢出-x：hidden;和overflow-y：auto;自动隐藏水平滚动条并显示垂直滚动条。
关于溢出的MDN web docs-y：
overflow-yCSS属性设置内容溢出块级元素的顶部和底部边缘时显示的内容。这可能是空的、滚动条或溢出内容。此属性也可以通过使用溢出简写属性来设置。

The Overflow Property（您可以看到您遇到的相同问题）与The overflow-y Property进行比较。在你的例子中，只需要像这样设置一条线：

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

以下代码片段显示了此属性的实际操作：

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>

css 如何删除滚动条轨道下的白色方块？

2条答案

相关问题

热门标签

最新问答