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>

垂直反向滚动和水平滚动

1 个答案: