세로 역 스크롤 및 가로 스크롤

Question

나는 the site을 방문했습니다. 여기에서 수평 스크롤을 볼 수 있고 레벨 4에서는 역 수직 스크롤을 볼 수 있습니다. 이것을 어떻게 할 수 있습니까? css3을 사용하거나 JS과 같은 다른 리소스를 사용하면됩니다.

미리 감사드립니다. 당신은 같은 것을 할 수있는 jQuery를 사용하여

Answer 1

:

$(function() { 

    $("body").mousewheel(function(event, delta) { 

     this.scrollLeft -= (delta * 30); 

     event.preventDefault(); 

    }); 

}); 

Demo 및 tutorial

또는

을

window.onscroll=function() { 
    var scroll = window.scrollY; 
    $('article').css('left', '-' + scroll + 'px'); 
} 

는 CSS를 맞는 있는지 확인

section { 
    overflow:hidden; 
    height:1024px; 
} 
article { 
    width:1024px;/*same as section's height*/ 
    position:fixed; /*you need this to fixe the V-scroll*/ 
} 
article p { 
    float:left; 
} 

HTML

<section> 
    <article> 

     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p> 

    </article> 
</section>