垂直反向滚动和水平滚动

Question

我访问过the site。在那里您可以看到水平滚动，在第 4 级中，您可以看到反向垂直滚动。我怎样才能做到这一点。只需使用css3 或使用其他一些资源，例如JS。

提前致谢。

Answer 1

使用 Jquery，您可以执行以下操作：

$(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>