垂直反向滚动和水平滚动

I have visited the site. There you can see horizontal scrolling and in level 4, you can see the Inverse vertical scrolling. How can I achieve this. Just by using css3 or using some other resources like JS.

我访问了该网站。在那里你可以看到水平滚动,在第4级,你可以看到反向垂直滚动。我怎样才能做到这一点。只需使用css3或使用JS等其他资源。

Thanks in advance.

提前致谢。

1 个解决方案

#1

Using Jquery you could do something like:

使用Jquery你可以做类似的事情:

$(function() {

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

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});

Demo and tutorial

演示和教程

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

make sure that the css fits

确保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>

#1