视差滚动问题 - 在webkit浏览器中滚动时div元素抖动

Question

我创建了一个视差滚动,它似乎在firefox中正常工作,但是在Chrome浏览器中滚动时,正文文本略有跳跃.点击这里滚动到关于部分.我不确定这是一个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

您将必须更改滚动的工作方式（即更改间距的计算方式），但这可以通过将 CSSposition:fixed元素添加到滚动的页面元素来解决。问题出在 JavaScript 处理和渲染所需的时间上。

例如，在您的页面上，您可以将每个<div>包含文本的标签设置为固定位置，然后使用 JavaScript/JQuery 函数来更新top:CSS 元素。这应该使页面滚动流畅。