0

Tengo un iframe para agregar una vista parcial HTML que contiene una navegación, pero al redirigirme a otra página aparecen scrolls que no tendrían que estar ahí y se van acumulando si sigo navegando. He intentado revisar los estilos CSS, el archivo de navegación, y no creo que sea una buena idea borrar el elemento y volver a añadirlo con javascript. Adjunto mi código.

ese es mi archivo principal, la primera página visible

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BinGo!</title>

    <!--BOOTSTRAP 5 CSS-->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
      crossorigin="anonymous"
    />

    <!--CUSTOM CSS-->
    <link rel="stylesheet" href="/src/css/styles.css" />
  </head>

  <body>
    <iframe class="nav-frame" src="/src/partials/nav.html"></iframe>
  </body>

  <!--BOOTSTRAP 5 JS-->
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
    crossorigin="anonymous"
  ></script>

  <!--CUSTOM JS-->
  <script
    language="JavaScript"
    type="text/javascript"
    src="/src/js/app.js"
  ></script>
</html>

al pasar a otra página de mi sitio, como la siguiente, el iframe se ve extraño, aparecen barras laterales, una cada vez que cambio de página a otra

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>BinGo!</title>
    
        <!--BOOTSTRAP 5 CSS-->
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
          crossorigin="anonymous"
        />
    
        <!--CUSTOM CSS-->
        <link rel="stylesheet" href="/src/css/styles.css" />
      </head>
      <body>
        <iframe class="nav-frame" src="/src/partials/nav.html"></iframe>
<p>otra página random</p>
      </body>
      <!--BOOTSTRAP 5 JS-->
      <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"
      ></script>
    
      <!--CUSTOM JS-->
      <script
        language="JavaScript"
        type="text/javascript"
        src="/src/js/app.js"
      ></script>
    </html>

problema visible

Me podrian ayudar con eso? Si pueden explicarme por que sucede, si es problema del iframe o de mi código y que hacer para arreglarlo me ayudará demasiado.

2 respuestas 2

0

simplemente agrega el complemento scrolling="no" en tu etiqueta iframe

el código del iframe quedaría así:

<iframe class="nav-frame" scrolling="no" src="/src/partials/nav.html"></iframe>

cualquier cosa me comentas, suerte!

0

Proba de agregar en tu CSS la propiedad overflow con valor hidden:

iframe {
    overflow: hidden;
}

De esta forma el contenido que se salga del espacio queda recortado y no muestra las barras de posición.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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