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

问题描述：

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

这是该网站的基本设计。

直到现在，我能够从D2水平滚动时，鼠标滚轮滚动downwards.Scroll从D2当鼠标滚轮向上滚动到D1至D5。现在我想学习如何在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]：http://*.com/questions/2346958/how-to-do-a-horizontal-scroll-on-mouse-wheel-scroll –

我知道。从那里，只有我学会了如何做到这一点。但是这个问题并没有解决我的问题。在回答之前请仔细阅读问题。 –

我给你的链接只是为了参考。你可以从中学习并解决你的问题。 –

答

我使用HorzScrolling插件为一个类似的项目。你只需要安装所需的插件

从例如在CSS Tricks

的过程：

加载jQuery和从here

<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(); 
     }); 
    });

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

相关推荐