Ist es möglich, die CSS-Skalierung zu ändern, ohne zwischen den Zuständen beim Scrollen zu flackern?

Question

Ich versuche einen Effekt zu erstellen, bei dem ein div in einer Liste innerhalb eines bestimmten Bereichs der Seite größer wird, ohne beim Übergang des Übergangspunktes zu flackern (prominentes Problem in Chrome, vielleicht auch andere Browser).

Here's a jsfiddle of my current situation.

ich ziemlich viel habe erreicht, was ich brauche, dank einen großen jsfiddle Beitrag hier auf Stackoverflow - aber wenn ich meinen eigenen Skaleneffekt hinzuzufügen Art flackert, wenn Sie zu langsam bewegen mich über die Übergangsgrenze . Dies liegt natürlich daran, dass der Skalierungsübergang (oder die normale Änderung von Höhe/Breite) das Zurückschrumpfen innerhalb der Grenze bewirkt, sobald sie den Übergangspunkt bereits passiert hat, und umgekehrt natürlich.

Gibt es eine Methode, um dies mit einer CSS-Methode zu machen, oder muss ich das Skript ändern - und in diesem Fall (wie ich mit dieser Art von mathematischen Gleichungen nicht vertraut bin) wie?

$(document).ready(function() { 
    $(window).on('scroll', function() { 
     var windowHeight = $(window).height(), 
      gridTop = windowHeight * .3, 
      gridBottom = windowHeight * .6; 
     $('ul li').each(function() { 
      var thisTop = $(this).offset().top - $(window).scrollTop(); 

      if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) { 
       // $(this).css('background', 'red'); 
            $(this).addClass('in_zone'); 
          } else { 
       //$(this).css('background', 'silver'); 
            $(this).removeClass('in_zone'); 
      } 
     }); 
    }); 
    $(window).trigger('scroll'); 
}); 

Answer 1

Das Problem liegt an Ihrer Überprüfung der Unterseite des Elements außerhalb des Bodens des Bereichs. Wenn das Element vergrößert wird, wird das nächste Mal, wenn scroll ausgelöst wird, wieder in den kleineren Zustand zurückversetzt, da sich der Boden des Elements außerhalb des Bereichs befindet. Dann wird der nächste Bildlauf wieder groß gemacht, da das kleinere Element jetzt vollständig innerhalb des Bereichs ist, und so weiter.

Um dies zu beheben, die Sie nur Basis, um die Kontrolle über die Oberseite des Elements innerhalb des Bereichs, wie dies zu sein brauchen würde:

if (thisTop > gridTop && thisTop < gridBottom) { 
    $(this).addClass('in_zone'); 
} else { 
    $(this).removeClass('in_zone'); 
} 

// Note that you can also re-write this logic with a single call to `toggleClass()`: 
$(this).toggleClass('in_zone', thisTop > gridTop && thisTop < gridBottom); 

Sie auch, dass die CSS-Skalierung Ursprungspunkt an, um sicherzustellen, müssten ist die Oberseite des Elements, so dass die top Position ein statischer Wert ist. Sie können das tun mit transform-origin (und es ist Anbieter Präfix Äquivalente):

transform-origin: 50% 0%; 

Working example

Oder alternativ, Sie müssten die ‚großen‘ Zustand kleiner, oder der Hit-Bereich größer machen, aber das würde leiden unter dem gleichen Problem, wenn die Elemente in der Nähe der Grenzen des Erfassungsbereichs sind.