滾動100％步驟裏面div

我有一個包含幾個100％身高的孩子的div。在滾動時，我總是想要一個孩子的身高達到100％。不幸的是，我無法弄清楚如何防止一次滾動多個步驟。我試過event.preventDefault()，也使用超時，但沒有工作。滾動100％步驟裏面div

Check out the fiddle看到我到目前爲止 - 以及問題看起來像什麼。

$container = $('#container'); 
var doScroll = true; 
var top = 0; 

$container.on("scroll", function(event){ 
    event.preventDefault(); 
    if (doScroll) { 
     doScroll = false; 
     top += $container.height(); 
     console.log("scroll event fired"); 
     $container.animate({scrollTop: top}, '700', 'swing', function() { 
      doScroll = true; 
     }); 
    } 
});

#container { 
    height: 500px; 
    width: 300px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 
.child { 
    height: 100%; 
    width: 100%; 
} 
.red { 
    background-color: red; 
} 
.blue { 
    background-color: blue; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div id="container"> 
    <div class="child red">Child 1</div> 
    <div class="child blue">Child 2</div> 
    <div class="child red">Child 3</div> 
    <div class="child blue">Child 4</div> 
    <div class="child red">Child 5</div> 
</div>

來源

2015-06-10 Thomas

看起來滾動事件在動畫完成後再次被調用。如果添加一個超時setTimeout（function（）{doScroll = true}，100）;'那麼它「起作用」。它仍然只是滾動，說實話，必須有一個更好的方式來做到這一點。 – MinusFour

其實有在你的代碼，這就造成更加混亂的三個問題：

的scroll事件cannot be cancelled。
$.animatescrollTop將在完整功能運行後立即觸發scroll事件。
所有動畫將排隊執行，無論doScroll有什麼值。

這裏最大的問題是由動畫觸發的附加scroll事件。爲了克服這個問題，你必須小心管理事件處理，例如通過跳過動畫觸發的事件。

例如，see the working demo也會在每次運行後清除動畫隊列。

來源

2015-06-23 05:56:49 mrgrain

在Chome和FF中可以正常工作，但是IE11有一些問題 - 有時會起作用，有時會跳過一兩個面板。我認爲這涉及到光標是否在可滾動div上 - 但我還不確定。 – Thomas

小提琴在IE11中工作正常。你能提供另一個例子嗎？ – mrgrain

我認爲這與我的Logitech鼠標/設定軟件有關，可能會發送太多/延遲的滾動事件。 – Thomas

就個人而言，我會使用散列位置#。

例如，如果您將錨定在您的包含href="#child1"的div中，那麼您可以通過執行location.hash="#child1"來使用JavaScript滾動到它們。

對於動畫滾動到位置散列，檢查出this script

來源

2015-06-10 15:32:38

您鏈接的演示不顯示如何處理滾動事件，只能單擊。 – Thomas

另外，我怎麼會知道我是什麼，以及接下來應該滾動什麼錨點？ – Thomas

滾動100％步驟裏面div

回答

相關問題