javascript - .js 左右滚动页面

Question

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

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

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

Answer 1

我已经为你准备了两个版本的你需要的东西。

版本 1：Div相互叠加

版本 2：Divs 在顶部和彼此旁边

检查它们并告诉我它们是否适合您的需要。这两个版本的设计方式都使得每个 div 都有页面的高度和宽度。

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

1. 包括 jQuery

2. 添加如下JS（同第二版）

   var $root = $('html, body'); $('a').click(function () {

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

   });

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

Answer 2

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,body {宽度：2000px; 高度：200px；背景：橙色}

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