cómo hacer contenido de superposición de barra de desplazamiento

Preguntas HTML
⏰ 4 minutos de lectura

Avatar de usuario de Yung Silva
yung silva

¿Cómo obtengo la barra de desplazamiento para superponer contenido div?

ya intenté usar track con fondo transparente, pero no funciona

::-webkit-scrollbar-track {background: transparent}

permanece igual, ocupando parte del contenido

ingrese la descripción de la imagen aquí

.faq-body {
  width: 250px;
  height: 400px;
  background: #fff;
  overflow: scroll;
  border: 1px solid #7b7d7f;
}

.faq-body::-webkit-scrollbar {
  width: 16px;
}
.faq-body::-webkit-scrollbar-thumb {
  background-color: #7b7d7f;
  border: 5px solid #fff;
  border-radius: 10rem;
}
.faq-body::-webkit-scrollbar-track {
  position: absolute;
  right: -3rem;
  top: -50rem;
  background: transparent;
}

.faq-question {
  padding: 20px;
  border-bottom: 1px solid #000;
  line-height: 1.3;
  color: #15191b;
  font-size: 0.8rem;
}
<div class="faq-body">
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
  </div>

¿Alguien me puede ayudar?

  • ¿Necesita una barra de desplazamiento personalizada o predeterminada?

    – Vitor Avanço

    10 de septiembre de 2019 a las 1:29

  • @VitorAvanço barra de desplazamiento personalizada dentro de un div, anulando el contenido, como en la imagen como en mi pregunta. Sou brasileiro también 😉

    – Yung Silva

    10 de septiembre de 2019 a las 1:33

  • Traté de llegar a esto con un iframe, pero no tuve suerte.

    – Nikolái Ehrhardt

    2 de mayo de 2021 a las 14:08

Avatar de usuario de Vitor Avanço
vítor avanço

Hay dos formas de obtener un resultado similar:

Librería Javascript

Usar http://grsmto.github.io/simplebar/

https://jsfiddle.net/w0a5Ls6h/

Pro:

  • Compatibilidad del navegador
  • resultado satisfactorio

Contras:

  • 3er JavaScript

o

Solo CSS

<style>
  .faq-body {
      width: 250px;
      height: 400px;
      background: #fff;
      overflow-y: scroll;
      border: 1px solid #7b7d7f;
    }

    .faq-body::-webkit-scrollbar {
      width: 7px;
    }
    .faq-body::-webkit-scrollbar-thumb {
      background-color: rgba(0,0,0,0.4);
      border-radius: 10rem;
      border: 1px solid #fff;
    }


    .faq-body::-webkit-scrollbar-track-piece:start {
      background: transparent;
    }

    .faq-body::-webkit-scrollbar-track-piece:end {
      background: transparent;
    }
    .faq-question {
      padding: 20px;
      border-bottom: 1px solid #000;
      line-height: 1.3;
      color: #15191b;
      font-size: 0.8rem;
    }
</style>

Contras:

  • Compatibilidad del navegador
  • Resultado similar pero no satisfactorio

  • La solución CSS no funciona, lib javascript funcionó perfectamente.

    – Yung Silva

    10 de septiembre de 2019 a las 2:23

  • No se pudo hacer funcionar la versión CSS. Esto es más complicado de lo que parece.

    –Tom Shaw

    8 de enero de 2020 a las 2:12

overflow: overlay funciona en algunos navegadores (Chrome, Edge) pero no en Firefox. Según cabe suponer scrollbar-gutter se supone que ayuda, pero no parece que ningún navegador haya implementado esto todavía.

Aquí hay una referencia al soporte del navegador:
https://caniuse.com/css-overflow-overlay

.faq-body {
  width: 250px;
  height: 400px;
  background: #fff;
  overflow-y: overlay;
  border: 1px solid #7b7d7f;
}

.faq-body::-webkit-scrollbar {
  width: 16px;
}
.faq-body::-webkit-scrollbar-thumb {
  background-color: #7b7d7f;
  border: 5px solid #fff;
  border-radius: 10rem;
}
.faq-body::-webkit-scrollbar-track {
  position: absolute;
  right: -3rem;
  top: -50rem;
  background: transparent;
}

.faq-question {
  padding: 20px;
  border-bottom: 1px solid #000;
  line-height: 1.3;
  color: #15191b;
  font-size: 0.8rem;
}
<div class="faq-body">
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
    <div class="faq-question">
      Question
    </div>
  </div>

¿Ha sido útil esta solución?