마우스 휠로 가로 스크롤

Question

나는 divs 주위에 js를 통해 테이블 ​​셀을 캡슐화하여 가로 스크롤 http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/을 얻는 Chris Coyier의 방법을 사용하고 있습니다. 그러나 스크롤하려면 수평 스크롤이있는 마우스가 있거나 스크롤하는 동안 이동을 유지해야합니다.

그래서이 mousewheel을 통해 페이지를 가로로 스크롤 할 수있는이 hscroll.js 플러그인 http://paulicio.us/items/view/24/horizontal-page-scrolling-using-javascript을 사용했습니다.

Firefox와 Opera에서 테스트 할 때 상당한 지연 시간이 발생합니다 (Chrome 및 Safari에서 잘 작동 함). 나는 Brandon Aaron의 mousewheel.js http://brandonaaron.net/code/mousewheel/docs이 실행 가능한 솔루션이라고 생각하지만 js에 관해서는 내가 문맹이라는 점에서 플러그인을 구현하는 방법을 모른다.

Jsfiddle : http://jsfiddle.net/694TK/3/

업데이트 :이 완화가없는 것을 제외하고 플러그인이 잘 작동하는 것 같다 tinyscroll, 그? http://jsfiddle.net/694TK/6/

또 다른 업데이트를위한 모든 솔루션 :http://jsbin.com/uwehot/
Mary Lou의 순환 컨텐츠 회전식 슬라이드 * (http://tympanus.net/codrops/2011/08/16/circular-content-carousel/) *를 참조하십시오.
앵커 링크가 작동하지 않는다는 점을 제외하면 꽤 잘 작동합니다.

Answer 1

흠, 나는 테이블 접근법이 충분히 좋다고 생각하지 않습니다. 단락을 감싸고 앵커를 설정하십시오. 제목에 대한 링크

앵커 링크는 애니메이션의 시작점 "마크"가됩니다. 사용자가 (이벤트가 플러그인에 의해 트리거됩니다) 애니메이션 시작 스크롤 시작하고 다음 앵커로 종료 할 때마다 이 사람은 자신의 애니메이션을 트리거 버튼 클릭 이벤트를 사용하는 example

를 봐

$('#btn_two').click(function(){ 
$('.nav').fadeOut("fast").fadeIn("slow"); 
$.scrollTo(this.hash, 1500, { easing:'elasout' }); 
}); 

마우스 휠 이벤트를 사용합니다. 비록 약간의 폭력적인 접근 방법입니다. 사용자가 스크롤 할 때 부드럽게 움직이기 위해서는 easing 플러그인을 사용하는 것입니다.