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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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

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.