-4

Coloquei border-radius na minha scrollbar, porém ficam sobras quando a cor de fundo é mudada, e gostaria de saber como retirar :

barra

Gostaria que ficasse nesse estilo:

inserir a descrição da imagem aqui

Onde não se vê mais a ::webkit-scrollbar-track

body{
  height: 1280px;
  
}
div{
  width:100%;
  height: 500px;
  background: red;
}
::-webkit-scrollbar{
    width: 10px;
    
}
::-webkit-scrollbar-track{
    
    border-radius: 8px;
    background: #ffffff;
    
}
::-webkit-scrollbar-thumb{
    background-color: green;
    border-radius: 8px; 
    
}
<div>Gostaria que a parte vermelha fosse todo o caminho da tela, atrás da barra verde</div>

3

1 Resposta 1

0

Da uma olhada nesse aqui, é parecido com o que você quer. Usa um pouco de jquery para as funcionalidades de rolagem e touch para celulares mas recomendo que de uma olhada.

Nanoscroller.js

http://jamesflorentino.github.io/nanoScrollerJS/

Testado nos Navegadores/browsers de desktop:

  • IE7+
  • Firefox 3+
  • Chrome
  • Safari 4+
  • Opera 11.60+

Mobile support:

  • iOS 5+ (iPhone, iPad and iPod Touch)
  • iOS 4 (with a polyfill)
  • Android Firefox
  • Android 2.2/2.3 native browser (with a polyfill)
  • Android Opera 11.6 (with a polyfill)

Para usar inclua no cabeçalho o arquivo javascript:

<script src="overthrow.js"></script>

... e adicione a classe em uma diva como no exemplo abaixo:

<div id="about" class="nano">
    <div class="overthrow nano-content"> ... content here ...  </div>
</div>
2
  • Obrigado por responder, geralmente todo mundo só reclama da pergunta. Vou dar uma olhada sim!
    – Marcos
    16/08/2020 às 23:57
  • Tranquilo, boa sorte aí. 18/08/2020 às 12:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .