Мерцание - изменение положения фона 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

Я исправил эту проблему.

Я добавил background-attachment:fixed к моим .parallax-container.

источник

2013-02-16 17:23:24 John

Мерцание - изменение положения фона CSS на прокрутке окна

ответ

Смежные вопросы