Problem z przewijaniem paralaksy - szarpanie elementu div podczas przewijania w przeglądarkach webkit

Question

Stworzyłem zwój paralaksy, który działa poprawnie w firefoxie, jednak w przeglądarce Chrome podczas przewijania jest lekki przeskok na tekście. click here scroll to the about section. Nie jestem pewien, czy jest to problem z css lub JS. Poniżej znajduje się urywek w mojej funkcji paralaksy

Czy ktoś wie, jak rozwiązać ten problem?

$(document).ready(function(){ 

// Cache the Window object 
$window = $(window); 

// Cache the Y offset and the speed of each sprite 
$('[data-type]').each(function() { 
    $(this).data('offsetY', parseInt($(this).attr('data-offsetY'))); 
    $(this).data('Xposition', $(this).attr('data-Xposition')); 
    $(this).data('speed', $(this).attr('data-speed')); 
}); 

// For each element that has a data-type attribute 
$('[data-type="background"]').each(function(){ 


    // Store some variables based on where we are 
    var $self = $(this), 
     offsetCoords = $self.offset(), 
     topOffset = offsetCoords.top; 


    // When the window is scrolled... 
    $(window).scroll(function() { 

     // If this section is in view 
     if (($window.scrollTop() + $window.height()) > (topOffset) && 
      ((topOffset + $self.height()) > $window.scrollTop())) { 

      // Scroll the background at var speed 
      // the yPos is a negative value because we're scrolling it UP!        
      var yPos = -($window.scrollTop()/$self.data('speed')); 

      // If this element has a Y offset then add it on 
      if ($self.data('offsetY')) { 
       yPos += $self.data('offsetY'); 
      } 

      // Put together our final background position 
      var coords = '50% '+ yPos + 'px'; 

      // Move the background 
      $self.css({ backgroundPosition: coords }); 

      $('[data-type="scroll-text"]', $self).each(function() { 
        var $text= $(this); 
        var pos = ($window.scrollTop()/10) * $text.data('speed'); 
        var curP = $text.css('margin-top'); 
        var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; 
        if(is_chrome) { 
         $text.animate({ 
         paddingTop: pos, 
         }, 200, 'linear', function() { 
          // Animation complete. 
         }); 
        } else { 
        $text.css('padding-top', pos); 
        } 
      }); 

     }; // in view 

    }); // window scroll 

}); // each data-type 


     }); // document ready 

Answer 1

Będziesz musiał zmienić sposób, w jaki działa przewijanie (czyli jak zmienić odstęp jest kalkulowana), ale to może być ustalona przez dodanie elementu position:fixed CSS do elementów strony, które są przewijania. Problem pojawia się od momentu, w którym JavaScript musi zostać przetworzony, a następnie renderowany.

Na przykład na swojej stronie ustawisz każdy tag <div> zawierający tekst, który będzie miał ustaloną pozycję, a następnie użyje funkcji JavaScript/JQuery do aktualizacji elementu CSS top:. Powinno to spowodować płynne przewijanie strony.

Answer 2

Widzę to samo jittering w FireFox i Chrome (Mac). Patrząc na swoje pojemniki, jedna rzecz, która rzuca na mnie okiem, to obliczana/używana pozycja piksela.

Chrome: <div id="about-title" style="margin-top: 1562.3999999999999px;"> 
FireFox: <div id="about-title" style="margin-top: 1562.4px;"> 

Przeglądarki nie pozwolą, aby zawartość była osadzona na poziomie 1/2 piksela, nie mówiąc już o 0,3999999 piksela. Myślę, że to porusza i próbuje obliczyć, czy zaokrąglić, czy zaokrąglić. Drży, ponieważ oblicza za każdym kliknięciem kółka myszy.

Tak więc, spróbowałbym dodać Math.round() do twoich pozycji, aby pojemniki nigdy nie były pozostawione w stanie zawieszenia.

Spójrz na kod tutaj: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

Firebug niektóre z elementów, a zobaczysz, że ich tylko ułamek piksel jest „0.5”. Większość z nich (większość) przechodzą do wartości liczb okrągłych.

Answer 3

Czy próbowałeś dodać funkcję preventdefault wewnątrz funkcji przewijania?

$(window).scroll(function(e) { 
    e.preventDefault(); 
    // rest of your code 
} 

Answer 4

Niektóre propozycje:

1.) Użyj position: fixed aby uniknąć drgań aparatu, jak będziesz brać element z obiegiem dokumentów. Możesz następnie ustawić go za pomocą indeksu Z.

2.) Pamięć podręczna, jak tylko można, aby ułatwić proces przetwarzania.

3.) Math.round może nie być konieczne, ale spróbuj dodać ten CSS do ruchomych obszarów: -webkit-transform: translate3d(0,0,0); To wymusi akcelerację sprzętową w Chrome, co może złagodzić niektóre fluktuacje. (Wyglądało to bardziej gładko na moim ekranie, gdy dodałem to do Inspektora, ale nie pozbywało się to niechęci za pomocą kółka przewijania.) Uwaga: Nie rób tego na całym dokumencie (np. Body tag), ponieważ może powodować pewne problemy z bieżącym układem. (Twój pasek nawigacyjny nie przykleił się do górnej części okna, na przykład.)

4.) Jeśli posiadasz animacje działające jako część logiki paralaksy (umieszczanie marginesu na miejscu lub coś w tym stylu) , usuń go - to prawdopodobnie spowodowałoby skok, który widzisz.

Mam nadzieję, że to pomoże. Powodzenia.

Answer 5

W poprzednim pytaniu stworzyłem dość dobrą implementację przewijania paralaksy. Jquery Parallax Scrolling effect - Multi directional Może się przydać.

Oto JSFiddle http://jsfiddle.net/9R4hZ/40/ użyj strzałek w górę/w dół lub kółko przewijania.

Używanie marginesów i dopełnienia do pozycjonowania prawdopodobnie powoduje problemy z renderowaniem. Podczas gdy mój kod wykorzystuje wejście przewijania lub klawiatury dla efektu, możesz zapętlić część relaventu i sprawdzić zmienną $ moving, aż dojdziesz do pożądanego elementu na ekranie.

function parallaxScroll(scroll) { 
    // current moving object 
    var ml = $moving.position().left; 
    var mt = $moving.position().top; 
    var mw = $moving.width(); 
    var mh = $moving.height(); 
    // calc velocity 
    var fromTop = false; 
    var fromBottom = false; 
    var fromLeft = false; 
    var fromRight = false; 
    var vLeft = 0; 
    var vTop = 0; 
    if($moving.hasClass('from-top')) { 
     vTop = scroll; 
     fromTop = true; 
    } else if($moving.hasClass('from-bottom')) { 
     vTop = -scroll; 
     fromBottom = true; 
    } else if($moving.hasClass('from-left')) { 
     vLeft = scroll; 
     fromLeft = true; 
    } else if($moving.hasClass('from-right')) { 
     vLeft = -scroll; 
     fromRight = true; 
    } 
    // calc new position 
    var newLeft = ml + vLeft; 
    var newTop = mt + vTop; 
    // check bounds 
    var finished = false; 
    if(fromTop && (newTop > t || newTop + mh < t)) { 
     finished = true; 
     newTop = (scroll > 0 ? t : t - mh); 
    } else if(fromBottom && (newTop < t || newTop > h)) { 
     finished = true; 
     newTop = (scroll > 0 ? t : t + h); 
    } else if(fromLeft && (newLeft > l || newLeft + mw < l)) { 
     finished = true; 
     newLeft = (scroll > 0 ? l : l - mw); 
    } else if(fromRight && (newLeft < l || newLeft > w)) { 
     finished = true; 
     newLeft = (scroll > 0 ? l : l + w); 
    } 
    // set new position 
    $moving.css('left', newLeft); 
    $moving.css('top', newTop); 
    // if finished change moving object 
    if(finished) { 
     // get the next moving 
     if(scroll > 0) { 
      $moving = $moving.next('.parallax'); 
      if($moving.length == 0) 
       $moving = $view.find('.parallax:last'); 
     } else { 
      $moving = $moving.prev('.parallax'); 
      if($moving.length == 0) 
       $moving = $view.find('.parallax:first'); 
     } 
    } 
    // for debug 
    $('#direction').text(scroll + " " + l + "/" + t + " " + ml + "/" + mt + " " + finished + " " + $moving.text()); 
}