Hortizantally 使用鼠标滚轮滚动 div - javascript答案

【问题标题】：Hortizantally scroll div using mouse wheel- javascriptHortizantally 使用鼠标滚轮滚动 div - javascript
【发布时间】：2015-10-05 05:30:52
【问题描述】：

刚才，不小心，我偶然发现了http://www.quoplus.com/。在网站的某些部分，它执行垂直滚动，而在某些部分，它在鼠标滚轮滚动上执行水平滚动。我非常喜欢这个设计，并计划学习如何实现这一点。我对 HTML、CSS 和 JAVASCRIPT 非常陌生。

这是网站的基本设计。

到目前为止，当鼠标滚轮向下滚动时，我可以从 d2 水平滚动到 d5。当鼠标滚轮向上滚动时，我可以从 d2 滚动到 d1。现在我想学习如果用户在 d5 上向上滚动，如何返回到 d2。如果用户在 d5 上向下滚动，也转到 d3。

到目前为止，这是我的代码：

html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css1.css" rel="stylesheet" type="text/css">
</head>
    <body>
        <div id="D1">
            d1
        </div>
        <div id="gentags">
            <div id="D2">
            d2
            </div>
            <div id="D5">
            d5
            </div>
        </div>
        <div id="D3">
            d3
        </div>
    </body>
</html>

css

html,body{
    height:100%;
    width:100%;
}

div
{
    height:100vh;
    width:100vw;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

#D1
{
    background-image: url(../Desktop/Unknown-1.png);
}

#D2
{
    background-image: url(../Desktop/Unknown-2.png);
}

#D3
{
    background-image: url(../Desktop/Unknown-4.png);
}

#D5
{
    background-image:url(../Desktop/Unknown-3.png);
}

#gentags
{
    width:200%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

#gentags div 
{
    width: 50%;
    float:left;
    white-space:nowrap;
    }

<script>
function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        if(delta<0)
        {document.getElementById('D2').scrollLeft -= (delta*50); // Multiplied by 40
            document.body.scrollLeft -= (delta*50); // Multiplied by 40
            e.preventDefault();}
        else
        {

        }
}
if (document.getElementById('D2').addEventListener) {
    // IE9, Chrome, Safari, Opera
    document.getElementById('D2').addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    document.getElementById('D2').addEventListener("DOMMouseScroll", scrollHorizontally, false);
}
// IE 6/7/8
else 
{document.getElementById('D2').attachEvent("onmousewheel", scrollHorizontally);
}

我使用的方法是否正确？如果没有，请指导我正确的方法。

【问题讨论】：

之前已经问过了。这是链接 [1]：stackoverflow.com/questions/2346958/…
我知道。从那里我也学会了如何做到这一点。但是这个问题并不能解决我的问题。回答前请仔细阅读问题。
我给你的链接仅供参考。您可以从中学习并自己解决问题。
请解释问题是什么，什么不起作用？错误信息？

标签： javascript html css

【解决方案1】：

我在一个类似的项目中使用了HorzScrolling 插件。您只需要设置所需的插件

来自CSS Tricks的示例

过程：

从here加载jQuery和鼠标滚轮插件

<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

将鼠标滚轮事件附加到正文。 “30”代表速度。 preventDefault 确保页面不会向下滚动。

 $(function() {
        $("body").mousewheel(function(event, delta) {
            this.scrollLeft -= (delta * 30);
            event.preventDefault();
        });
    });

【讨论】：