.js 페이지의 왼쪽 및 오른쪽으로 스크롤

Question

다음 스크립트 및 페이지 레이아웃 - http://jsfiddle.net/wLkYg/을 사용하면 사용자가 내 웹 사이트에서 위아래로 스크롤 할 수 있으며 자바 스크립트 스윙 효과가 깔끔합니다.

그러나 이제는 위의 jsfiddle 예제의 내용물 (#div 상자 색)을 옆으로 나란히 놓으려는 경우 스크롤 효과 (http://jsfiddle.net/UjeZH/)가 손실됩니다.

첫 번째 예처럼 두 번째 예에서 동일한 전환을 달성하려면 어떻게해야합니까?

Answer 1

두 가지 버전의 버전이 준비되어 있습니다.

Version 2: Divs on top and next to each other

Version 1: Divs on top of each other

그들을 확인하고 그들이 당신의 필요에 맞는 경우 말해. 두 버전 모두 각 div가 페이지의 높이와 너비를 갖도록 설계되었습니다.

첫 번째 버전은 스윙 영향을 미치지 않지만이하여 추가 할 수 있습니다 : 다음 JS (두 번째 버전과 같은)를 추가

jQuery를

포함

1. var $ root = $ ('html, body'); $ ('A')을 클릭 (함수() {

   $root.animate({ 
   
       scrollLeft: $($.attr(this, 'href')).offset().left, 
       scrollTop: $($.attr(this, 'href')).offset().top 
   
   }, 500); 
   
   return false; 
   

   }).;

또한 위의 코드를 사용하면 세로 및 가로로 스크롤 할 수 있으므로 문제가 해결됩니다. 코드를 사용하면 세로로만 스크롤 할 수 있으므로 div를 가로로 정렬 할 때 작동하지 않는 이유가 있습니다.

Answer 2

document.body.addEventListener('wheel', function (e) { 
    console.log(this.scrollLeft) 
    e.preventDefault() 
    if (e.deltaY > 0) { 
     this.scrollLeft += 10 
    } else { 
     this.scrollLeft -= 10 
    } 
}) 

세트 CSS와 그것을

HTML을 테스트 체 {폭 : 2000px; 높이 : 200px; 배경 : 오렌지}

다른 요소로 이벤트를 가져올 수 있습니다.