Задержка эффекта прокрутки Chrome - PullRequest
Новая
       35

Задержка эффекта прокрутки Chrome

0 голосов
/ 04 мая 2020

У меня есть сеть с пятью разделами, и я хочу показать каждый раздел при прокрутке. В то же время дочерние элементы каждого раздела добавляют несколько классов для их анимации.

Он хорошо работает в Firefox и Chrome на рабочем столе и в Firefox и Safari на мобильном телефоне. Но в Chrome Мобильный, когда я прокручиваю вниз, я сначала вижу все пустым, а затем раздел показывает. Я думаю, что это проблема с асинхронной прокруткой (APZ).

Как я могу ее решить?

HTML: 

<body>
    <!-- Inicio Navbar -->
    <nav class="color-gris">
      <div class="nav-wrapper">
          <!-- Section shown at start. -->
      </div>
    </nav>
    <!-- Fin Navbar -->

    <!-- Inicio Seccion Inicio -->
    <div  id="inicio">
      <div class="parallax-container valign-wrapper">
        <!-- Section shown at start. -->
      </div>
    </div>
    <!-- Fin Seccion Inicio -->

    <!-- Inicio Seccion Servicios -->
    <div  id="servicios">
      <div class="container">
       <!-- Section shown at start. -->
      </div>
    </div>
    <!-- Fin Seccion Servicios -->

    <!-- Inicio Seccion Nosotros -->
    <div class="section scrollspy color-azul hideme" id="nosotros">
      <!-- Section shown when scrolltop value let 1/3 of the content be seen -->
    </div>
    <!-- Fin Seccion Nosotros -->

    <!-- Inicio Seccion Impulsora -->
    <div class="section scrollspy black hideme" id="impulsora">
        <!-- Section shown when scrolltop value let 1/3 of the content be seen -->
    </div>
    <!-- Fin Seccion Impulsora -->

    <!-- Inicio Seccion Clientes -->
      <div class="section scrollspy hideme" id="clientes">
         <!-- Section shown when scrolltop value let 1/3 of the content be seen -->
      </div>

    <!-- Fin Seccion Clientes -->

    <!-- Inicio Seccion Contacto -->
        <div id="contacto" class="section scrollspy color-naranja hideme">
          <!-- Section shown when scrolltop value let 1/3 of the content be seen -->
        </div>
    <!-- Fin Seccion Contacto -->


    <!-- Inicio Seccion Footer -->
              <div class="row section black white-text hideme" id="footer">
                <!-- Section shown when scrolltop value let 1/3 of the content be seen -->
              </div>
  <!-- Fin Seccion Footer -->
  </body>

СЦЕНАРИЙ: 

<script>
    $(document).ready(function () {

      /* Every time the window is scrolled ... */
      $(document).scroll(function () {

        /* Check the location of each desired element */
        $('.hideme').each(function (i) {
          var bottom_of_object = $(this).position().top + ($(this).outerHeight(true)/3);
          var bottom_of_window = $(window).scrollTop() + $(window).height();

          /* If the object is 1/3 visible in the window, fade it it */
          if (bottom_of_window > bottom_of_object) {
            $(this).animate({ 'opacity': '1' }, {
              duration: 500,
              complete:  function(){
                if ( $(this).is("#nosotros") ) {
                  $('#nosotros-titulo').addClass('animated bounceIn delay-0.3s');
                  $('#mision').addClass('animated fadeInLeft')
                  $('#vision').addClass('animated fadeInUp')
                  $('#valores').addClass('animated fadeInRight')
                }
                if ( $(this).is("#impulsora") ) {
                  $('#impulsora-titulo').addClass('animated fadeInDown delay-0.3s');
                  $('#impulsora-imagen').addClass('animated fadeIn delay-0.3s');
                  $('#impulsora-datos').addClass('animated fadeInLeft delay-1s');
                  $('#impulsora-texto').addClass('animated animated fadeInUp');
                }
                if ( $(this).is("#clientes") ) {
                  $('#clientes-titulo').addClass('animated fadeInDown delay-0.3s');
                  $('#cliente1').addClass('animated fadeIn delay-0.3s');
                  $('#cliente2').addClass('animated fadeIn delay-0.3s');
                  $('#cliente3').addClass('animated fadeIn delay-1s');
                  $('#cliente4').addClass('animated fadeIn delay-1s');
                  $('#cliente5').addClass('animated fadeIn delay-2s');
                  $('#cliente6').addClass('animated fadeIn delay-2s');
                  $('#cliente7').addClass('animated fadeIn delay-3s');
                  $('#cliente8').addClass('animated fadeIn delay-3s');               
                }
              }});
          }
        });
      });
    });
  </script>

Заранее спасибо за помощь !!

...