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

我正在使用的方法是否正確？如果沒有，請指導我採取正確的方法。

來源

2015-10-05 Babaji Shivram

之前已經問。這裏是鏈接 [1]：http://stackoverflow.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(); 
     }); 
    });

來源

2015-11-12 12:39:23 William

Hortizantally滾動使用鼠標滾輪div - javascript

回答

相關問題