如何去掉滚动条轨道下的一个白色小方块？

问题描述 投票：0回答：3
`::-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;
}`

我在CSS中为滚动条编写了这段代码，并且滚动条工作得很好，但由于某种原因，我不知道滚动条下方有一个白色的小方块。

这里是整个项目的链接，以防有人认为问题可能是由代码中的其他地方引起的。

我想不出有什么我没有尝试解决这个问题。

html css scrollbar
3个回答
0
投票

那是因为你的水平轴和垂直轴都有“溢出：滚动”，这个白色的小方块是它们的拦截。

替换为

overflow-y:scroll

因此，不需要

::-webkit-scrollbar-track:horizontal{
   display: none;
}
0
投票

根据W3文档：

对于可滚动条，请使用 x 轴和 y 轴。设置overflow-x:hidden;和溢出-y：自动；自动隐藏水平滚动条并显示垂直滚动条。

关于溢出的 MDN 网络文档：

overflow-y CSS 属性设置当内容溢出块级元素的顶部和底部边缘时显示的内容。这可能什么都没有，一个滚动条，或者溢出的内容。也可以使用溢出简写属性来设置此属性。

溢出属性（您可以在其中看到与您遇到的相同问题）与溢出-y属性相比。在你的情况下，只需设置这样一行：

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>

0
投票

角点是两个滚动条的横截面。您可能启用了两个轴滚动。在支持 webkit 的浏览器中，可以管理角的宽度

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


::-webkit-scrollbar-corner {
    /* yellow to make it visible, transparent will make it disappear*/
    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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.