Invisible div problem

Hello community, I have my view is more or less well.

<script id="historia.html" type="text/ng-template">
  <ion-view title='{{title}}' left-buttons="leftButtons">
    <ion-content padding="true" delegate-handle="myContent">
      <div style="background-color:#E8E8E8;">
        <div id="sticky-nav">
          <div style="width: 100%;margin-left: auto;margin-right: auto;margin-top: 0;margin-bottom: 0;" id="row">
            <nav class="large-12 columns" id="tabs" style="width: 108%;">
              <a ng-click="slideTo('1')" id="antes" class="first active">Antes de la carrera</a>
              <a ng-click="slideTo('2')" id="durante" class="middle">Durante la carrera</a>
              <a ng-click="slideTo('3')" id="despues" class="last">Después de la carrera</a>
            </nav>
            <div id="1"  class="tab" style="padding-top: 115px;">

              <div class="full-width imagenFondo alimentacion" style="background :url('img/antes-alimentacion.jpg') no-repeat center;background-size: 100% 130px;">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-chico_foto.png') repeat-y left center;">
                  <div class="large-12 columns">
                    <h3>Alimentación</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-gen.png') repeat-y left top;">
                  <div class="large-12 columns">
                    <p>Estar bien hidratado y comer comidas sanas que aporten energía a tu cuerpo es parte de lo que debes considerar en tu plan de alimentación previo al Entel Mountainbike Challenge.</p>
                  </div>
                </div>
              </div>
              
              <div class="full-width imagenFondo mecanica" style="background:url('img/antes-mecanica.jpg') no-repeat center;background-size: 100% 130px;">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-chico_foto.png') repeat-y left center;">
                  <div class="large-12 columns">
                    <h3>Mec√°nica</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-gen.png') repeat-y left top;">
                  <div class="large-12 columns">
                    <p>¡Revisa tu bicicleta con anticipación! Si encuentras alguna falla, podrás acudir a un servicio técnico sin arriesgar tu participación en la carrera.</p>
                  </div>
                </div>
              </div>
              
            </div>
            <div id="2"  class="tab">
              <div class="full-width imagenFondo alimentacion" style="background:url('img/durante-alimentacion.jpg') no-repeat center;background-size: 100% 130px;">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-chico_foto.png') repeat-y left center;">
                  <div class="large-12 columns">
                    <h3>Alimentación</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-gen.png') repeat-y left top;">
                  <div class="large-12 columns">
                    <p>Manténte hidratado y nutrido durante toda la carrera, independientemente de los kilómetros que recorras.</p>
                  </div>
                </div>
              </div>
              
              <div class="full-width imagenFondo calentamiento" style="background:url('img/durante-calentamiento.jpg')no-repeat center;background-size: 100% 130px;">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-chico_video.png') repeat-y left center;">
                  <div class="large-12 columns">
                    <h3>Calentamiento</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-gen.png') repeat-y left top;">
                  <div class="large-12 columns">
                    <p>Un buen calentamiento anticipa y prepara tus m√ļsculos para el esfuerzo intenso que est√° por venir.</p>
                  </div>
                </div>
              </div>
              
              <div class="full-width imagenFondo posturas-y-maniobras" style="background:url('img/durante-posturas-y-maniobras.jpg')no-repeat center;background-size: 100% 130px;">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-chico_video.png') repeat-y left center;">
                  <div class="large-12 columns">
                    <h3>Posturas y maniobras</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-gen.png') repeat-y left top;">
                  <div class="large-12 columns">
                    <p>Mejora tu rendimiento y comodidad a través de una postura correcta arriba de la bicicleta.</p>
                  </div>
                </div>
              </div>
              
              <div class="full-width imagenFondo mecanica" style="background:url('img/durante-mecanica.jpg') no-repeat center;background-size: 100% 130px;">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-chico_foto.png') repeat-y left center;">
                  <div class="large-12 columns">
                    <h3>Mec√°nica</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-gen.png') repeat-y left top;">
                  <div class="large-12 columns">
                    <p>Lleva contigo un kit de herramientas b√°sico para enfrentar los posibles problemas que puedas tener durante la carrera.</p>
                  </div>
                </div>
              </div>
              
            </div>
            <div id="3" class="tab">
              <div class="full-width imagenFondo elongacion" style="background :url('img/despues-elongacion.jpg') no-repeat center;background-size: 100% 130px;">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-chico_foto.png') repeat-y left center;">
                  <div class="large-12 columns">
                    <h3>Elongación</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-gen.png') repeat-y left top;">
                  <div class="large-12 columns">
                    <p>Elonga cada parte del cuerpo para evitar lesiones musculares.</p>
                  </div>
                </div>
              </div>
              
              <div class="full-width imagenFondo alimentacion" style="background :url('img/despues-alimentacion.jpg') no-repeat center;background-size: 100% 130px;">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-chico_foto.png') repeat-y left center;">
                  <div class="large-12 columns">
                    <h3>Alimentación</h3>
                  </div>
                </div>
              </div>
              <div class="full-width">
                <div class="row" style="height: 130px;background: url('img/bg-prepara-gen.png') repeat-y left top;">
                  <div class="large-12 columns">
                    <p>Aprovecha la ventana metabólica que se produce post deporte para ingerir una alta cantidad de nutrientes.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="full-width carreracomenzo" style="background: #ff6702;width: 100%;max-width: 100%;" id="footer_entrenamiento">
            <div class="row" style="background: url('img/bg-prepara-final.png') no-repeat left top;">
              <div class="large-12 columns">
                <h2>Para ti, la carrera ya comenzó</h2>
                <h3>No te olvides de estos prácticos tips y realizar una buena alimentación.</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ion-content>
  </ion-view>
</script>

The functionality and data load there is no problem. My problem is that the ‚Äúinspect element‚ÄĚ in the browser the next div appears

<div class="scroll padding" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">

The first time you load the view looks like this

If I remove the div that property, making it look like this is what I need. Also, if I do pass small view appears this div, but if I enlarge not occur. Someone knows why this happens?

That div is the trick of our scrolling.

Instead of relying on tradition overflow-scroll, which can be problematic, we use a js scroll with translates a div to simulate a scrolling.

So that div is on purpose.

1 Like

And there is no way to remove or at least fix the error in this case because the error gives ?, also happens ONLY when the charge first seen

Well that error seems to be unrelated to the scroll. Any chance you could throw what you have or a close example into a plunker or codepen?

I just checked and the error occurs to me only in Chrome, the device works perfect, but I had the idea to make this menu bar with the scroll down, is that possible?

hmm, not sure I understand, could you explain?

I need to move a div With the scroll, I use fixed position but the scroll fails

Sorry for my bad English.

Sort of like a sticky header in ios?

Right now sticky list headers aren’t available. It’s something we’re hoping to add down the road post 1.0

Right now a temporary solution would be to use a subheader

It has thank you very much for your help, to continue learning Ionic!