2

意見が不足しているため、質問を言い換えます。ChromeとIEのウィンドウスクロールの背景位置を変更するとちらつきが発生する理由を知っている人はいますか？

基本的に、このようなものはChromeとIEで常にちらつきを引き起こします。

$(window).scroll(function(){$(divwithbg).css('background-position','center '+positiveinteger+px')});

このようなものは、主要なブラウザではちらつくことはありません。

$(window).scroll(function(){$(divwithbg).css('background-position','center '+negativeinteger+px')});

この問題を確認したい場合は、添付の画像とともに、以下のサンプルコードを試してください。data-parallaxdirection = "0"を設定すると、ジッターが発生しなくなります。data-parallaxdirection = "1"を設定すると、ジッターが発生します。使用していた画像をこの投稿に添付しました。

<!DOCTYPE html>
<html>
<head>
        <style type="text/css">
        .parallax-container {width:100%; position:relative; display:block; overflow:hidden; background-color:black; background-position:center center; background-repeat:no-repeat;}

        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


        <script type="text/javascript">
var CONTAINER = window;
var AVAILHEIGHT;
$(document).ready(function(){
    $(window).scroll(ParallaxScrollEvent);
    AVAILHEIGHT = $(window).height();
    $('.parallax-container').height(AVAILHEIGHT/1.1);
});

function ParallaxScroll(obj)
{
    var containerTop = $(obj).position().top;
    var containerHeight = $(obj).height();
    var parallaxspace = parseInt($(obj).attr('data-parallaxspace'));
    var goforward = parseInt($(obj).attr('data-parallaxdirection'));
    var scrollTop =  $(window).scrollTop() + AVAILHEIGHT;

//  var links = $('.location-links'); //on contact page


    if( scrollTop > containerTop)
    {
            var pos = 0;
            if(goforward)
            {
                            // why does this cause flickering?
                var scrolled = $(window).scrollTop() - containerTop;
                pos = 1.2*scrolled;

            }
            else
            {
                            // why is this flicker free?
                pos = -1*(scrollTop-containerTop)*parallaxspace/(2*containerHeight);
            }
            $(obj).css('background-position', 'center '+pos+'px');
    }
}

function ParallaxScrollEvent()
{
    var parallaxcontainer = $('.parallax-container');
    for(var c=0; c< parallaxcontainer.length; c++)
        ParallaxScroll(parallaxcontainer[c]);
}

        </script>

</head>
<body>
<div class="parallax-container" style="background-image:url(images/location/2.jpg);" data-parallaxdirection="1" data-parallaxspace="800">
            </div>
            <div class="parallax-container" style="background-image:url(images/location/2.jpg);" data-parallaxdirection="1" data-parallaxspace="800">
            </div>
            <div class="parallax-container" style="background-image:url(images/location/2.jpg);" data-parallaxdirection="1" data-parallaxspace="800">
            </div>

</body>
</html>

ここに画像の説明を入力してください

4

1 に答える 1

3

問題を修正しました。

にを追加しましbackground-attachment:fixedた.parallax-container。

于 2013-02-16T17:23:24.277 に答える