0

Tengo el siguiente código html, y funciona pues la página se imprime perfectamente cuando le reduces el tamaño; el único problema es que no le añade una scroll bar, a pesar de que hay una incrustación que quedan por debajo de la parte visible de la página, ¿Por qué pasa esto? Si fuera posible, ¿cómo se soluciona?

¿Es necesario añadir el scroll bar manualmente?

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <title>Prueba</title>
        <style>
           body {
  background-image: url("https://64.media.tumblr.com/bd1b0d977b3e43cc5645297d5322662c/tumblr_ndyybljlWc1rvnh7zo1_r1_500.gif");
  overflow: hidden;
  height: 100vh;
  background-size: cover;
  background-position: center;
}
            /* Centrar elemento dentro de main */
.main {
 position: absolute;
 margin: auto;
 left: 0; right: 0;
 top: 0; bottom: 0;
 width: 1404px/*550px*/;
 height: 658px/*315px*/; line-height: 50px; /* Con «line-height» con el mismo valor numérico de la altura centras horizontalmente el texto */

}
.video{
    width: 1370px;
 height: 770px;
}
body::-webkit-scrollbar {
    width: 7px;
}

body::-webkit-scrollbar-thumb {
    background: #414141;
}
.instagram {
    display: flex;
    position: absolute;
    margin: auto;
    left: 0;
    /*right: 0;*/
    top: 0;
    bottom: 0;
    width: 15vw;
    height: 15px;
    line-height: 50px;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
}

        </style>
    </head>
    <body>
        <div class="instagram" style='text-align:right'>
            <a class="instagram2" href="https://www.youtube.com/channel/UCJl1YajcPWTeJNsQhGyMIMg"><img src="https://cdn-icons-png.flaticon.com/512/174/174855.png" alt="https://www.youtube.com/channel/UCJl1YajcPWTeJNsQhGyMIMg" style="width:50px;height:50px;"></a>
            <a class="youtube" href="https://www.youtube.com/channel/UCJl1YajcPWTeJNsQhGyMIMg"><img src="https://cdn-icons-png.flaticon.com/512/1384/1384060.png" alt="https://www.youtube.com/channel/UCJl1YajcPWTeJNsQhGyMIMg" style="width:50px;height:50px;"></a>
            <a class="tiktok" href="https://www.tiktok.com/@teamheretics"><img src="https://cdn.icon-icons.com/icons2/3041/PNG/512/tiktok_logo_icon_189233.png" alt="https://www.tiktok.com/@teamheretics" style="width:50px;height:50px;"></a>
        </div>
        <container class="main">               
            <iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/AawLM81gIHo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <blockquote class="tiktok-embed" cite="https://www.tiktok.com/@teamheretics/video/7073184335922302214" data-video-id="7073184335922302214" style="max-width: 336px;min-width: 325px;" > <section> <a target="_blank" title="@teamheretics" href="https://www.tiktok.com/@teamheretics">@teamheretics</a> Keloqz haciendo de las suyas <a title="gaming" target="_blank" href="https://www.tiktok.com/tag/gaming">#gaming</a> <a title="valorant" target="_blank" href="https://www.tiktok.com/tag/valorant">#valorant</a> <a title="parati" target="_blank" href="https://www.tiktok.com/tag/parati">#parati</a> <a target="_blank" title="♬ sonido original - Heretics" href="https://www.tiktok.com/music/sonido-original-7073184327609109254">♬ sonido original - Heretics</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
        </div>
    </body>
</html>

1
  • ¿Lograste solucionar el inconveniente? El bot Comunidad relanzó tu pregunta al inicio (otra vez) :) No olvides aceptar la respuesta que te ha sido más útil, o redactar por tu cuenta una respuesta acerca de lo que te ha servido y aceptarla.
    – padaleiana
    Commented el 7 nov. 2023 a las 18:46

3 respuestas 3

0

El problema lo tienes en el css del body, debes cambiar

overflow: hidden; 

por

overflow: scroll;
0

Es porque tienes en el body la propiedad overflow: hidden si quizas quieres tener un fondo con una imagen que se mantenga al hacer scroll, cambiale a la imagen el background-position a el valor fixed background-position: fixed y ya no necesitaras ni el heigth: 100vh tambien dependiendo de la imagen, podria crearte un scroll horizontal, lo que podrias hacer es usar la propiedad overflow-x: hidden

0

Al poner en tu código:

overflow: hidden;

Le has indicado al navegador que en el body los elementos que sobren (overflow) los "esconda" (no los muestre), por eso no te aparece el scroll. La solución es cambiarlo por:

overflow: scroll;

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.