閃爍 - 在窗口滾動上更改CSS背景位置

由於缺乏意見，我將重新說明我的問題。有誰知道爲什麼在Chrome和IE的窗口滾動上修改背景位置會導致閃爍有時？閃爍 - 在窗口滾動上更改CSS背景位置

基本上是這樣總會導致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>

enter image description here

來源

2013-02-15 John

我解決了這一問題。我爲.parallax-container添加了background-attachment:fixed。

來源

2013-02-16 17:23:24 John

閃爍 - 在窗口滾動上更改CSS背景位置

回答

相關問題