18

我创建了一个视差滚动，它似乎在 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
4

6 回答 6

4

一些建议：

1.)position: fixed用于避免任何抖动，因为您将从文档流中取出元素。然后，您可以使用 z-index 定位它。

2.) 尽可能多地缓存以减少处理时间。

3.) Math.round 可能不是必需的，但尝试将此 CSS 添加到您的移动区域：-webkit-transform: translate3d(0,0,0);这将强制 Chrome 中的硬件加速，这可能会缓解一些抖动。（当我用 Inspector 添加它时，它在我的屏幕上看起来更流畅，但它并没有摆脱滚轮的跳跃。）注意：不要在整个文档（例如正文标签）上这样做，因为它可能导致您当前的布局出现一些问题。（例如，您的导航栏没有粘在窗口顶部。）

4.）如果您有任何动画作为视差逻辑的一部分运行（将边距补间或沿着这些线），请将其删除 - 这可能会导致您看到的跳跃。

希望这可以帮助。祝你好运。

于 2012-11-20T16:20:50.487 回答
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”。他们中的大多数（大部分）都是整数值。

于 2012-11-20T14:54:36.753 回答
1

您是否尝试过在滚动功能中添加 preventdefault ？

$(window).scroll(function(e) {
    e.preventDefault();
    // rest of your code
}
于 2012-11-20T14:59:31.303 回答
1

您将不得不更改滚动的工作方式（即更改间距的计算方式），但这可以通过将position:fixedCSS 元素添加到正在滚动的页面元素来解决。问题来自于 JavaScript 处理和渲染所花费的时间。

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

于 2012-11-20T14:54:28.610 回答
0

在上一个问题中，我创建了一个相当不错的视差滚动实现。Jquery Parallax Scrolling effect - Multi directional你可能会发现它很有用。

这是 JSFiddle http://jsfiddle.net/9R4hZ/40/使用向上/向下箭头或滚轮。

使用填充和边距进行定位可能是您遇到渲染问题的原因。虽然我的代码使用滚动或键盘输入来实现效果，但您可以循环相关部分并检查 $moving 变量，直到您到达屏幕上所需的元素。

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());
}
于 2012-11-27T14:08:50.753 回答
0

可能与您的具体情况无关，但我有一个跳跃的视差滚动问题，我能够解决它为页面的固定部分添加以下 CSS：

@supports (background-attachment: fixed)
{
    .fixed-background
    {
        background-attachment: fixed;
    }
}

不确定所有细节，但可以在Alternate Fixed & Scroll Backgrounds找到

于 2018-12-27T12:10:55.797 回答