.js向左和向右滚动页面

.js Scroll left and right of page

本文关键字：滚动 js      更新时间：2023-09-26

我有以下脚本和页面布局-http://jsfiddle.net/wLkYg/它允许用户在我的网站上上上下滚动，带有一个整洁的javaScript摇摆效果。

然而，由于我现在想将内容（上面jsfiddle示例中的彩色#div框）并排排列，它失去了滚动效果-http://jsfiddle.net/UjeZH/.

我如何才能在第二个例子中实现与第一个例子相同的转换？

我已经为您准备了两个版本的所需内容。

版本1：Div在另一个之上

版本2：Div位于的顶部和旁边

看看它们，告诉我它们是否适合你的需要。这两个版本的设计方式都使每个div都具有页面的高度和宽度。

第一个版本没有摇摆效果，但你可以通过以下方式添加：

  1. 包括jQuery

  2. 添加以下JS（与第二个版本相同）

    var$root=$（'html，body'）；$（'a'）.点击（函数（）｛

    $root.animate({
    scrollLeft: $($.attr(this, 'href')).offset().left,
    scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;

    })；

此外，如果你使用上面的代码，它将解决你的问题，因为它允许你垂直和水平滚动。您所拥有的代码允许您仅垂直滚动，这就是当您水平对齐div时它不起作用的原因。

document.body.addEventListener('wheel', function (e) {
    console.log(this.scrollLeft)
    e.preventDefault()
    if (e.deltaY > 0) {
        this.scrollLeft += 10
    } else {
        this.scrollLeft -= 10
    }
})

设置css并测试它

html，体{宽：2000px；高：200px；背景：橙色}

和它一样，您可以通过另一个元素获取事件。

相关文章：