刚才，无意中，我偶然发现了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;
}
js
<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);
}
我使用的方法是否正确？如果没有，请指导我采用正确的方法。
最佳答案
我用了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(); }); });
关于javascript - 使用鼠标滚轮水平滚动 div-javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32941840/