자바 스크립트 스크롤에 걸려 들다 - Chrome

Question

사용자가 스크롤 할 때 background-positition & 가기 속성을 변경하려고합니다.

HTML 부분

<section id="first" data-type="background" data-speed="1"> 
    <div id="sprite1" data-type="sprite" data-speed="-1.5"></div> 
    <div id="sprite2" data-type="sprite" data-speed="-1"></div> 
</section> 
<section id="second" data-type="background" data-speed="1"> 

</section> 

CSS 부분

section { 
    width: 100%; 
    height: 1000px; 
    position: relative; 
} 

#first { 
    background: url('../img/bg1.png'), no-repeat, fixed, 50% 0; 
} 

#second { 
    background: url('../img/bg2.png'), no-repeat, fixed, 50% 0; 
} 

#sprite1 { 
    position: relative; 
    background: url('../img/sprite1.png'), no-repeat, fixed, 50% 0; 
    width: 100px; 
    height: 100px; 
    top: 550px; 
    left: 100px; 
} 

#sprite2 { 
    position: relative; 
    background: url('../img/sprite2.png'), no-repeat, fixed, 50% 0; 
    width: 200px; 
    height: 200px; 
    top: 650px; 
    left: 150px; 
} 

JS 부분 : 나는 다음과 같은 짓을했는지 있도록 스프라이트 배경 및 시차에 대한 고정 된 위치를 시뮬레이션 할

$(document).ready(function() { 

    /* Initialisation */ 
    var $window = $(window); 

    var offset = 0; 
    $('section[data-type="background"]').each(function(index) { 
     var $this = $(this); 
     console.log($this); 
     $this.data('data', { 
      height: $this.height() + offset, 
      speed: parseFloat($this.attr('data-speed')) 
     }); 
     offset = $this.data('data').height; 
    }); 

    $('div[data-type="sprite"]').each(function(index) { 
     var $this = $(this); 
     $this.data('data', { 
       xPosition: parseInt($this.css('top').replace(/px/, '')), 
      yPosition: parseInt($this.css('left').replace(/px/, '')), 
      speed: parseFloat($this.attr('data-speed')) 
     }); 
     console.log($this.data('data')); 
    }); 

    $('#first').data('position', '0'); 
    $(window).scroll(function(){ 
     console.log($(this)); 
     var scrollPos = parseInt($window.scrollTop()); 
     $('section[data-type="background"]').each(function(index) { 
      var $this = $(this); 
      $this.css('background-position', '50% ' + (scrollPos/$this.data('speed') + $this.data('data').height) + 'px'); 
     }); 
     $('div[data-type="sprite"]').each(function(index) { 
      var $this = $(this); 
      $this.css('top', ((scrollPos/$this.data('data').speed) + $this.data('data').xPosition) + 'px'); 
     }); 
    }); 

}); 

당신은 아무 문제가없는 파이어 폭스에 here

가, 배경이 고정 된 것 같다 결과를 볼 수 있지만, 크롬에, 브라우저가 페이지를 스크롤하여 시작하는 것 같다 후에는 코드를 실행합니다. Chrome에서 완전히 엉망이되었습니다. 페이지를 스크롤하기 전에 코드를 강제로 실행할 수있는 방법이 있습니까?

들으 :)

Answer 1

난 당신이 스크롤 애니메이션으로 다스 려있는 것을 확실하지 않다, 그냥 같아요. $ .css()를 사용하는 대신 $ .animate()를 사용하여 전환을 부드럽게 시작할 수 있습니다. 나는 IE에서 이것을 또한 검사했고 또한 똑같이하는 것으로 보인다. $ .css 대신 $ .animate()를 사용하면 여러 브라우저에서 다르게 등록 될 수있는 $ .scroll()이 매끄럽게 나올 수 있습니다.