jQuery 스크롤 요소가 작동하지 않습니다

Question

두 개의 열을 사용하여 캘린더/이벤트 페이지를 구성하고 있습니다. 몇 가지 스크롤 작업 (현재 일정/월 자동 스크롤, 캘린더에서 일정 요약을 클릭하여 일정 세부 정보로 스크롤)을 만들었지 만 몇 가지 이유로 나는 위/아래를 가져올 수 없습니다. 두 열 중 하나에서 작업하려면 스크롤하십시오. 이전/다음 셀렉터에서 ".current"클래스를 설정하고 있습니다. 그러나 스크롤은 아무런 의미가 없습니다. 어떤 오류도 발생하지 않습니다.

는

잘못 갈해야하는 줄은 난 그냥 간단하게 뭔가를 내려다있어 상당히 확실 해요,하지만 누군가가 내가 거라고 무엇에 관한 제안이있는 경우 매우 그것을 감사

container.animate({ 
    scrollTop: $('.current').offset().top - 
        container.offset().top + 
        container.scrollTop() 
}, 500) 

입니다 !

업데이트 : 위/아래 스크롤이 작동하지 않는 문제를 발견했습니다. 잘못된 셀렉터를 참조하고있었습니다.

그러나 이제는 새로운 문제가 발생합니다. 첫 번째 클릭 (위 또는 아래)에서 "현재"클래스가 올바르게 설정되었지만 아무것도 스크롤하지 않습니다. 두 번째 클릭 (같은 방향) 일 때 목록은 첫 번째/마지막 항목에 도달하지 않지만 스크롤됩니다. 반대 방향으로 클릭하면 목록은 계속해서 - 이전 방향으로 한 번 계속 스크롤 한 다음 올바른 방향으로 계속 스크롤합니다.

나는 나의 설명이 혼란을 야기하지 않기를 바란다 :) 바이올린을 시도하면 아마 내가 무엇을 의미하는지 볼 수있을 것이다.

업데이트 된 코드는 http://jsfiddle.net/4E4V8/3/에서 찾을 수 있습니다.

Answer 1

당신도 thoug 것을 볼 수 있습니다 첫 번째 클릭에서 개체가 이동하지 않으면 scrollTo.offset().top이 첫 번째 클릭에서 두 번째 클릭으로 변경됩니다. 왜 그런지 모르지만 그렇지 않습니다. 첫 번째와 두 번째 클릭 사이의 차이를 비교하고 객체에 대한 CSS를 살펴본 후 첫 번째 클릭과 두 번째 클릭 사이의 차이는 객체의 높이 + 마진 바닥 (유일한 수직 마진)이라는 것을 알게되었습니다.

은 결과, 단순히

container.animate({ 
    scrollTop: scrollTo.height() + parseInt(scrollTo.css('margin-bottom')) + scrollTo.offset().top - container.offset().top + container.scrollTop() 
}, 300); 

Here is the jsFiddle에 선

container.animate({ 
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() 
}, 300); 

을 변경했습니다.

특히 변수 값과 함께 경고를 사용하면 디버깅에 매우 유용합니다.

Answer 2

그것은 완벽 하진하지만 여기 출발점이 될 것입니다 : jsFiddle

나는 HTML을 변경했습니다, 그래서 나에게 더 나을 :

<div id="events-container"> 
     <div id="events-detail"> 
      <div class="container"></div> 
      <div class="nav"></div> 
     </div> 
     <div id="events-overview"> 
      <div class="container"></div>          
      <div class="nav"></div> 
     </div> 
    </div> 

의 .js는 아직도 100 % 바로,하지만 주요 아이디어는 : 당신이 if 및 alert(scrollTo.offset().top + ', ' + container.offset().top + ', ' + container.scrollTop());의 else if 내 경고를 넣으면

function navUp(e) { 
     // get .container div 
     var container = $(this.parentElement.previousElementSibling); 
     // find .current event div 
     var current = container.children(".current"); 
     // get the up span 
     var button = $(e.target); 
     // does .current event div has a next event div ? 
     if(current[0].nextElementSibling){ 
      // add .current to next event div 
      var next = $(current[0].nextElementSibling).addClass("current"); 
      // remove .current class from original event div 
      container.children("div").not(next).removeClass("current"); 
      // animate 
      container.animate({ 
      scrollTop: current[0].nextElementSibling.offsetTop - current.offset().top 
      }, 100); 
     } 
    };