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都将具有页面的高度和宽度。

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

包括jQuery

添加以下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 {width：2000px;身高：200px;背景：橙色}

与此相同，你可以通过另一个元素获得事件。

.js向左和向右滚动页面

2 个答案: