視差滾動問題 - 在webkit瀏覽器中滾動時div元素跳動

Question

我已經創建了一個視差滾動，它似乎在Firefox中正常工作，但是在Chrome瀏覽器中滾動時正文文本略有跳動。 click here scroll to the about section。我不知道這是一個CSS或JS問題..下面是我已經納入我的視差功能的片段

有誰知道我該如何解決這個問題？

$(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

你將不得不改變了滾動的作品（即更改間距是如何計算的）的方式，但是這可以通過添加position:fixed CSS元素被滾動的頁面元素進行固定。問題來自於JavaScript處理和渲染所花費的時間。

例如，在您的頁面上，您將設置包含文本的每個<div>標籤具有固定位置，然後使用JavaScript/JQuery函數更新top: CSS元素。這應該使頁面滾動順暢。

Answer 2

我在FireFox和Chrome（Mac）中看到了相同的抖動。看着你的容器，有一件事讓我目瞪口呆，就是正在計算/使用的像素位置。

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

瀏覽器不會允許內容坐在1/2像素，更不用說0.3999999的像素。我認爲它正在移動它，並試圖計算是否收尾。它會因爲每次點擊鼠標滾輪而計算出來而產生抖動。

因此，我會嘗試將Math.round（）添加到您的位置，以便容器永遠不會處於閒置狀態。

看看這裏的代碼：http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

Firebug的一些元素，你會看到他們的一個像素的唯一分數爲「0.5」。他們中的大多數（大部分）都是整數值。

Answer 3

您是否嘗試過在scroll功能中添加preventdefault？

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

Answer 4

幾點建議：

1）使用position: fixed以避免任何抖動，因爲你將採取的元素出文檔流程。然後你可以使用z-index來定位它。 2）緩存儘可能多的緩存處理時間。 3.）Math.round可能不是必需的，但可以嘗試將CS​​S添加到移動區域：-webkit-transform: translate3d(0,0,0);這將強制在Chrome中進行硬件加速，這可能會緩解一些抖動。 （當我使用Inspector添加這個功能時，它在我的屏幕上看起來更平滑，但它沒有擺脫滾輪的跳動。）注意：不要在整個文檔（例如body標籤）上這樣做，因爲它可能會導致您的當前佈局存在一些問題。 （例如，您的導航欄並未粘貼到窗口頂部。）

4.）如果您有任何動畫作爲視差邏輯的一部分運行（將邊距補充到位或沿着這些線條的某處） ，刪除它 - 這可能會導致你看到的跳躍。

希望這會有所幫助。祝你好運。

Answer 5

在上一個問題中，我創建了一個相當不錯的視差滾動實現。 Jquery Parallax Scrolling effect - Multi directional您可能會覺得它很有用。

這裏是JSFiddle http://jsfiddle.net/9R4hZ/40/使用向上/向下箭頭或滾輪。

使用填充和邊距進行定位可能是您遇到渲染問題的原因。雖然我的代碼使用滾動或鍵盤輸入的效果，你可以循環relavent部分，並檢查$移動變量，直到你到達屏幕上的所需元素。

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()); 
}