Início / user-16233549

Mike West's questions

Martin Hope
Mike West
Asked: 2025-04-03 00:04:49 +0800 CST
  • 5

Espero que seja uma pergunta simples, mas não consigo encontrar uma resposta.

Tenho um elemento de rolagem vertical dentro de um wrapper com cantos de raio, dando a aparência de que o elemento rolável está sendo visualizado através de uma janela. Gostaria de manter a barra de rolagem vertical, mas como ela tem a altura total do wrapper, as extremidades aparecem sobre os cantos curvos.

Gostaria de reduzir a escala da barra de rolagem para que ela fique cerca de 20 px menor que a altura do wrapper, para que os cantos curvos permaneçam visíveis.

::-webkit-scrollbar dá muitas opções, mas nenhuma parece alterar o comprimento/escala da trilha. Isso pode ser feito?

Exemplo do problema aqui: https://codepen.io/Juggers2k/pen/WbNLqYx

<style>
    .tablescroll {
      max-width: 946px;
      height: calc(100vh - 200px);
      top: 300px;
      margin: auto;
      border: 1px solid #900;
      border-radius: 15px;
      box-shadow: inset 5px 5px 3px #888;
      background-color: #ccc;
      overflow-x: hidden;
      overflow-y: scroll;
      padding: 10px 0px;
    }
    table.enthcompare {
      position: static;
      width: 926px;
      border-collapse: separate;
      border-spacing: 10px 0px;
      vertical-align: top;
    }
</style>

<div class="tablescroll">
  <table class="enthcompare">
    <tr>
      <td>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
        blah<br>
      </td>
    </tr>
  </table>
html