Invisible div problem

1

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?

2

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
3

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

4

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?

5

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?

6

hmm, not sure I understand, could you explain?

7

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

Sorry for my bad English.

8

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

9

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