web-dev-qa-db-ja.com

視差スクロールの問題-Webkitブラウザーでスクロールするとdiv要素がぎくしゃくする

私は視差スクロールを作成しましたが、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
javascriptjquerycssgoogle-chromewebkit
17
NewBoy

いくつかの提案：

1.）ドキュメントフローから要素を取り出すため、_position: fixed_を使用してジッターを回避します。その後、z-indexを使用して配置できます。

2.）可能な限りキャッシュして、処理時間を短縮します。

3.）Math.roundは必要ないかもしれませんが、このCSSを移動領域に追加してみてください：-webkit-transform: translate3d(0,0,0);これにより、Chromeでハードウェアアクセラレーションが強制され、ジッターの一部が緩和される場合があります。 （これをインスペクターで追加したときの画面はより滑らかに見えましたが、スクロールホイールを使用してジャンプ性を取り除きませんでした。）注：これをドキュメント全体（ボディタグなど）で行わないでください。現在のレイアウトで問題が発生します。 （たとえば、ナビゲーションバーがウィンドウの上部に固定されていません。）

4.）パララックスロジックの一部としてアニメーションを実行している場合（マージンを所定の位置に調整するか、これらの線に沿って何か）、それを削除します。これにより、おそらくジャンプが発生します。

お役に立てれば。幸運を祈ります。

4
jedd.ahyoung

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」であることがわかります。それらのほとんど（バルク）は、数値を四捨五入します。

2
Dawson

スクロール機能内にpreventdefaultを追加してみましたか？

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

スクロールの動作方法を変更する必要があります（つまり、間隔の計算方法を変更します）が、これは、スクロールしているページ要素にposition:fixed CSS要素を追加することで修正できます。問題は、JavaScriptが処理してからレンダリングするのにかかる時間から生じています。

たとえば、ページで、テキストを含む各<div>タグを固定位置に設定し、JavaScript/JQuery関数を使用してtop: CSS要素を更新します。これにより、ページがスムーズにスクロールします。

1
Patrick548

あなたの詳細には関係ないかもしれませんが、私はびくびく視差スクロールの問題がありました。ページの固定部分に次のCSSを追加することで解決できました。

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

すべての詳細はわかりませんが、- 代替固定＆スクロール背景 にあります

0
Jahmic

前の質問で、かなり良い視差スクロールの実装を作成しました。 Jqueryパララックススクロール効果-多方向 役に立つかもしれません。

これが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());
}
0
Louis Ricci