2017-08-30 312 views
0

我試圖使整個網站與滾動觸發的所有事件。我只是需要幫助實現這樣的效果:jquery滾動垂直/水平

  1. 我有填補所有的視口幾個div的一個網站,我希望用戶能夠向下滾動到一個名爲div的,然後當他保持滾動網站停止垂直滾動,但div的內容水平滾動。當它完成後,網站可以再次垂直滾動。

explainations

<body> 

<header> </header> 

<div class="scroll-vertical" id="tile1"></div> 
<div class="scroll-vertical" id="tile2"></div> 
<div class="scroll-vertical" id="tile3"></div> 

<div class="scroll-horizontal" id="tile4"> 
    <div class="horizontal" id="tile5"></div> 
    <div class="horizontal" id="tile5-a"></div> 
    <div class="horizontal" id="tile5-b"></div> 
    <div class="horizontal" id="tile5-c"></div> 
</div> 

<div class="scroll-vertical" id="tile6"></div> 
<div class="scroll-vertical" id="tile7"></div> 
<footer> </footer> 

  • 如何使該網站只能從一個DIV滾動到其他(整版)
  • 我知道有一個jquery插件名爲fullpage.js它做得很好,但作爲一個st使用插件學習web開發並不是提高技能的最佳方式。

    感謝您的幫助!

    乾杯西蒙

    回答

    0

    爲什麼你會認爲? 我懷疑它可以得到比

    $(document).ready(function() { 
        $('#fullpage').fullpage(); 
    }); 
    

    插件的作者很可能也簡單得多已經遇到過,考慮和必須解決的一些細節和問題,跨瀏覽器和不,你有沒有有機會思考。

    編輯::動畫的div:

    $("#bigasshorizontaldiv").animate({ 
        left: "-=thewidthofoneviewport", 
        }, 5000, function() { 
        // Animation complete. 
    }); 
    
    +0

    是當然的,你是完全正確的,但在這裏我的目標也是fuly undurstand它是如何工作的,我是新來webdevelopement和努力學習和使用所有解決我的問題的時間插件並不是實現這一目標的最佳方式。而fullpage.js不是免費的,沒有權利,所以對於學生來說這是一個問題。 –

    +0

    我完全同意。我想讓你知道一個「更簡單的方法」是相當長的一段時間,以避免錯誤的期望。 – deg

    +0

    不要擔心,也許我應該改變這一點,英語不是我的母語,所以有時候我可能不會使用最合適的詞。我會改變它,所以它更容易理解。 –