1

Tengo un problema al querer darle un estilo personalizado a la barra de desplazamiento. mi codigo HTML donde esta el contenedor:

<div className="tareas-contenedor">
    <h2 className="title-tareas">Mis Tareas</h2>
    <ListaDeTareas />
  </div>

mi css:

.tareas-contenedor {
 min-height: 350px;
 max-height: 60vh;
 min-width: 600px;
 max-width: 750px;
 text-align: start;
 margin: 30px auto 0 auto;
 padding: 5px;
 border-radius: 25px;
 background: rgba(221,221,221,0.55);
 -webkit-backdrop-filter: blur(3px);
 backdrop-filter: blur(3px);
 border: 1px solid rgba(221,221,221,0.275);
 overflow-x: auto;
 }
/* Barra de desplazamiento */
.tareas-contenedor::-webkit-scrollbar{
 width: 8px;
 background-color: #2546b8;
 border-radius: 20px;
 }
.tareas-contenedor::-webkit-scrollbar:window-inactive {
 display: none;
 }
.tareas-contenedor::-webkit-scrollbar-thumb  {
 background-color: #09C;
 border-radius: 6px;

 }

y el resultado es este introducir la descripción de la imagen aquí quisiera saber si hay una forma para que la barra no desborde el contenedor, ya que los extremos son mas grande que éste

2 respuestas 2

1

Puedes crear un div dentro de tareas-contenedor, encerrar a todo el contenido y mostrar el scroll únicamente ahí, así el scroll no se desbordará de tareas-contenedor.


Entonces, primero creamos el div adentro de tareas-contenedor, le llamaremos contenido, y este div encerrará a tu h2 y a tu lista de tareas, quedando tu estructura HTML así:

<div class="tareas-contenedor">
  <div class="contenido">
    <h2 class="title-tareas">Mis Tareas</h2>
    <ListaDeTareas />
  </div>
</div>

Y a contenido le damos los mismos estilos (solo los necesarios) que tiene tareas-contenedor:

.contenido {
  min-height: 350px;
  max-height: 60vh;
  min-width: 600px;
  max-width: 750px;
  overflow-x: auto;
}

Y los estilos del scroll que se apliquen al nuevo div creado:

.contenido::-webkit-scrollbar{
  width: 8px;
  background-color: #2546b8;
  border-radius: 20px;
}
.contenido::-webkit-scrollbar:window-inactive {
  display: none;
}
.contenido::-webkit-scrollbar-thumb  {
  background-color: #09C;
  border-radius: 6px;
}

Y así el scroll se verá solo en contenido, y como contenido está dentro de tareas-contenedor, el scroll no se desbordará de tareas-contenedor.


Ejemplo:

.tareas-contenedor {
  min-height: 350px;
  max-height: 60vh;
  min-width: 600px;
  max-width: 750px;
  text-align: start;
  margin: 30px auto 0 auto;
  padding: 5px;
  border-radius: 25px;
  background: rgba(221,221,221,0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(221,221,221,0.275);
  overflow: hidden; /* oculto el scroll de este div porque no lo queremos visualizar */
}

.contenido {
  min-height: 350px;
  max-height: 60vh;
  min-width: 600px;
  max-width: 750px;
  overflow-x: auto; /* muestro el scroll de este div, porque es el que queremos visualizar */
}
/* Barra de desplazamiento */
.contenido::-webkit-scrollbar{
  width: 8px;
  background-color: #2546b8;
  border-radius: 20px;
}
.contenido::-webkit-scrollbar:window-inactive {
  display: none;
}
.contenido::-webkit-scrollbar-thumb  {
  background-color: #09C;
  border-radius: 6px;
}
<div class="tareas-contenedor">
  <div class="contenido">
    <h2 class="title-tareas">Mis Tareas</h2>    
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
    <p>texto de ejemplo</p>
  </div>
</div>

1

Con clip-path lo solucionas:

clip-path: inset(0% 0% round 25px);

Donde los 25px son los mismos que tu utilizas en tu border-radius

Demo:

.tareas-contenedor {
clip-path: inset(0% 0% round 25px);
 min-height: 350px;
 max-height: 60vh;
 min-width: 600px;
 max-width: 750px;
 text-align: start;
 margin: 30px auto 0 auto;
 padding: 5px;
 border-radius: 25px;
 background: rgba(221,221,221,0.55);
 -webkit-backdrop-filter: blur(3px);
 backdrop-filter: blur(3px);
 border: 1px solid rgba(221,221,221,0.275);
 overflow-x: auto;
 }
/* Barra de desplazamiento */
.tareas-contenedor::-webkit-scrollbar{
 width: 8px;
 background-color: #2546b8;
 border-radius: 20px;
 }

.tareas-contenedor::-webkit-scrollbar-thumb  {
 background-color: #09C;
 border-radius: 6px;

 }
<div class="tareas-contenedor">
    <h2 class="title-tareas">Mis Tareas</h2>
    <script>
       for(let i=0;i<100;i++){
           document.write(`<p>texto de ejemplo</p>`)
       }
    </script>
  </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.