javascript - .js 页面左右滚动

Question

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

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

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

Answer 1

我已经为您准备好了您需要的两个版本。

Version 1: Divs on top of each other

Version 2: Divs on top and next to each other

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

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

1. 包括 jQuery

2. 添加如下JS(同第二个版本)

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

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

   });

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