CSS: como ocultar barras de rolagem no celular

No desenvolvimento móvel, existe um elemento de rolagem horizontal. O produto me disse que não há necessidade de barra de rolagem. Eu disse que é simples e pode ser oculto. Não esperava que houvesse também o problema de incompatibilidade entre Android e iOS.

código

<style>
  .list {
      
      
    display: flex;
    overflow: auto;
    gap: 10px;
    padding: 10px;
  }

  .item {
      
      
    width: 100px;
    height: 100px;
    background: royalblue;
    border-radius: 8px;
    flex-shrink: 0;
  }
</style>

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Método 1: -webkit-barra de rolagem

.list::-webkit-scrollbar {
    
    
    display: none;
  }

Há um problema de compatibilidade, as barras de rolagem ainda serão exibidas em algumas máquinas

Método 2: estouro

Adicione um elemento pai à camada externa

<div class="wrap">
  <div class="list">
    
  </div>
</div>

css

.wrap {
    
    
    overflow: hidden;
}

.list {
    
    
    padding-bottom: 20px;
    margin-bottom: -10px;
}

O princípio é o seguinte

Método 3: caminho do clipe

documentação do caminho do clipe

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

Cortar a posição inferior da barra de rolagem

.list {
    
    
  clip-path: inset(0 0 10px);
}

Método 4: máscara de máscara

Princípio: Exiba a parte opaca da imagem da máscara e a parte transparente será cortada

.list {
    
    
  -webkit-mask: linear-gradient(red, red) 0 0/100% calc(100% - 10px) no-repeat;
}

Resumir

• -webkit-scrollbarExistem problemas de compatibilidade

• overflowA melhor compatibilidade e a mais intuitiva, de acordo com as ideias da maioria das pessoas, a desvantagem é que você precisa aninhar uma camada separada de pai

• clipA implementação é a mais concisa e fácil de entender, sendo a mais recomendada neste caso

• maskA ideia é clipconsistente, é um pouco mais complicada de implementar e podem ser alcançados efeitos de fade-in mais complexos, que podem compreender melhor

referência

Três formas de cortar, como o CSS oculta a barra de rolagem no terminal móvel?