Javascript 垂直反向滚动和水平滚动

我访问了。在那里你可以看到水平滚动，在第4级，你可以看到反向垂直滚动。我怎样才能做到这一点。只需使用

css3

或使用一些其他资源，如

JS

---

提前感谢。

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

$(function() {

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

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});

及

或

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

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

Lorem Ipsum只是印刷和排版的虚拟文本

谢谢您的回答。我也在搜索反向垂直滚动的结果，如我在示例链接中所示。它是视差，只是设置背景图像的动画

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;
}

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