ScrollLeft가 잘못된 위치로 스크롤됩니다.

Question

나는 금요일 퀴즈를 만들고 있습니다! scrollLeft-jQuery 효과를 사용하여 다음 질문으로 이동하고 싶습니다. 나는 이것을 문제없이 사용했지만, 이제는 계속 미친 듯이 뛰어 오릅니다. 내가 뭘 잘못하고 있니?

사이트 : www.carlpapworth.com/friday-quiz/

html로 :

   <div id="qWrap"> 
        <ul id="qBox"> 
    <!--Q1-->   <li id="q1" class="qContainer"> 
         <div class="qQuestion"><?php echo $Q1; ?> 
         </div> 
         <ul class="qAnswers"> 
          <li><a href="#q2" class="<?php echo $Q1aClass; ?>"><h3><?php echo $Q1a; ?></h3></a></li> 
          <li><a href="#q2" class="<?php echo $Q1bClass; ?>"><h3><?php echo $Q1b; ?></h3></a></li> 
          <li><a href="#q2" class="<?php echo $Q1cClass; ?>"><h3><?php echo $Q1c; ?></h3></a></li> 
         </ul> 
        </li> 
<!--Q2-->   <li id="q2" class="qContainer"> 
         <div class="qQuestion"><?php echo $Q2; ?> 
         </div> 
         <ul class="qAnswers"> 
          <li><a href="#q3" class="<?php echo $Q2aClass; ?>"><h3><?php echo $Q2a; ?></h3></a></li> 
          <li><a href="#q3" class="<?php echo $Q2bClass; ?>"><h3><?php echo $Q2b; ?></h3></a></li> 

          <li><a href="#q3" class="<?php echo $Q2cClass; ?>"><h3><?php echo $Q2c; ?></h3></a></li> 
         </ul> 
        </li> 
    </ul> 
    </div> 

CSS :

#qWrap{ 
width: 480px; 
height: 260px; 
margin: 0 auto; 
overflow: scroll; 
} 

#qBox{ 
width: 1100%; 
height: 260px; 
display: block; 
} 


li.qContainer { 
position: relative; 
width: 9%!important; 
height: 260px!important; 
padding: 0px 0px; 
margin: 0 50px 0 0px; 
float: left; 
} 


.qQuestion { 
width: 480px; 
height: 50px; 
padding: 10px 0px; 
font-family: corbel; 
font-size: 28px; 
text-align: center; 
color: #ffffff; 
} 

JS :

$(document).ready(function() { 
    $('.qAnswers li a').bind('click',function(event){ 
         var $anchor = $(this); 
         $('#qWrap').stop().animate({ 
          scrollLeft: $($anchor.attr('href')).offset().left 
         }, 2000); 
         event.preventDefault(); 
        }); 
}); 

Answer 1

생성 한 마크 업이 잘못되었습니다. 콘솔에서 소스를 봅니다. 의사 표시는 다음과 같습니다.

<qwrap> 
    <qbox> 
    <li.qcontainer /> 
    <q2 /> 
    <li.qcontainer> 
     <q3 /> 
    </li.qcontainer> 
    </qbox> 
</qwrap> 

또한 다음 쿼리를 실행하면 왜 다른 위치로 스크롤하는지 알 수 있습니다. 마크 업이 해제되어 있기 때문에 은 질문마다 다른 offsetParent을 기반으로 계산하므로 일치하지 않는 이유가 무엇입니까?

$('#q2').offsetParent(); 
$('#q3').offsetParent(); 

마크 업을 수정하면 스크롤링 문제가 해결됩니다.

편집 : 마크 업이 정확하면 position 속성을 확인하여 qWrap을 스크롤 할 거리를 계산할 수 있습니다. offset은 문서와 관련이있는 반면, position은 부모와 관련된 오프셋을보고합니다. http://api.jquery.com/position/

position: relative을 qBox에 추가하십시오. 그러면 질문에 대해 상자와 관련된 position이 스크롤됩니다.

그러면 코드는 이미 가지고있는 것과 같습니다. offset을 position으로 변경하십시오.

$(document).ready(function() { 
    $('.qAnswers li a').bind('click',function(event){ 
         var $anchor = $(this); 
         $('#qWrap').stop().animate({ 
          scrollLeft: $($anchor.attr('href')).position().left 
         }, 2000); 
         event.preventDefault(); 
        }); 
}); 

Answer 2

에서 귀하의 .stop(), 넣어

도움이되는지 확인하십시오.