CSS: Cómo ocultar la barra de desplazamiento en el terminal móvil

En el desarrollo móvil, hay un elemento de desplazamiento horizontal. El producto me dijo que no hay necesidad de barras de desplazamiento. Le dije que esto es simple y se puede ocultar. No esperaba que también existiera el problema de incompatibilidad entre Android y 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 desplazamiento

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

Hay un problema con la compatibilidad, las barras de desplazamiento aún se mostrarán en algunas máquinas

Método 2: desbordamiento

Agregar un elemento principal a la capa exterior

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

CSS

.wrap {
    
    
    overflow: hidden;
}

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

El principio es el siguiente.

Método 3: ruta de clip

documentación de ruta de clip

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

Corta la posición de la barra de desplazamiento a continuación.

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

Método 4: máscara

Principio: muestre la parte opaca de la imagen de la máscara y la parte transparente se recortará

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

Resumir

• -webkit-scrollbarHay problemas de compatibilidad

• overflowLa mejor compatibilidad y la más intuitiva, de acuerdo con las ideas de la mayoría de las personas, la desventaja es que es necesario anidar una capa principal separada

• clipLa implementación es la más concisa y fácil de entender, y es la más recomendada en este caso.

• maskLa idea es clipconsistente, es un poco más complicada de implementar y se pueden lograr efectos de aparición gradual más complejos, que pueden comprender mejor

referencia

Tres formas de recortar, ¿cómo oculta CSS la barra de desplazamiento en el terminal móvil?