Dominando la ocultación de barras de desplazamiento: Mejora la experiencia del usuario

Introducción

En este laboratorio, exploraremos el concepto de ocultar las barras de desplazamiento en un elemento mientras sigue siendo desplazable utilizando CSS. Utilizaremos la propiedad overflow: auto para habilitar el desplazamiento, y scrollbar-width: none para ocultar las barras de desplazamiento en Firefox, y display: none en el pseudo-elemento ::-webkit-scrollbar para ocultar las barras de desplazamiento en los navegadores WebKit. Este laboratorio proporcionará una experiencia práctica en la implementación de esta técnica CSS para mejorar la experiencia del usuario en los elementos desplazables.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/CodingStandardsandBestPracticesGroup(["Coding Standards and Best Practices"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") css/CodingStandardsandBestPracticesGroup -.-> css/comments("Comments") subgraph Lab Skills css/selectors -.-> lab-35209{{"Ocultar barras de desplazamiento"}} css/width_and_height -.-> lab-35209{{"Ocultar barras de desplazamiento"}} css/display_property -.-> lab-35209{{"Ocultar barras de desplazamiento"}} css/pseudo_elements -.-> lab-35209{{"Ocultar barras de desplazamiento"}} css/comments -.-> lab-35209{{"Ocultar barras de desplazamiento"}} end

Ocultar barras de desplazamiento

index.html y style.css ya se han proporcionado en la máquina virtual.

Para permitir que un elemento sea desplazable mientras se ocultan las barras de desplazamiento, siga estos pasos:

Utilice overflow: auto para habilitar el desplazamiento en el elemento.
Utilice scrollbar-width: none para ocultar las barras de desplazamiento en Firefox.
Utilice display: none en el pseudo-elemento ::-webkit-scrollbar para ocultar las barras de desplazamiento en los navegadores WebKit (como Chrome, Edge y Safari).

A continuación, se muestra una implementación de ejemplo:

<div class="scrollable">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum id
    leo a consectetur. Integer justo magna, ultricies vel enim vitae, egestas
    efficitur leo. Ut nulla orci, rutrum eu augue sed, tempus pellentesque quam.
  </p>
</div>

.scrollable {
  width: 200px;
  height: 100px;
  overflow: auto;
  scrollbar-width: none;
}

/* Ocultar barras de desplazamiento en los navegadores WebKit */
.scrollable::-webkit-scrollbar {
  display: none;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio Ocultar barras de desplazamiento. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.