停止滾動頁面，滾動DIV

我創建這個着陸頁：http://tag4share.com/landing/#停止滾動頁面，滾動DIV

凡位於兩個星系S3（一個白色的，上面有「Organizador」標籤和一個黑色的「PARTICIPANTE」標籤），我想停止滾動頁面並自動開始滾動移動內容（一個iFrame，div，任何東西）。

可能嗎？

基本上我想「關注」div內的滾動（即使光標沒有懸停它也能使其工作）。或滾動時滾動身體不動。

例子：http://www.google.com/nexus/5/

在「你需要捕捉每個重要時刻的一切。」部分。

我嘗試：

var lastScroll; 
var currentScroll = $(window).scrollTop(); 

$(window).scroll(function() { 

    lastScroll = currentScroll; 
    currentScroll = $(window).scrollTop(); 

    if($(window).scrollTop() >= 2024 && $(window).scrollTop() < 2500) 
    { 
       var difference = currentScroll - lastScroll; 
     $(".main").css({"margin-top":"-="+currentScroll}); 
    } 
    });

我試着用滾動一起移動的主要股利。它的工作原理，但它看起來很奇怪（不停顫抖）。

謝謝！

來源

2013-11-03 Maurício Giordano

您的問題聽起來類似於此：http://stackoverflow.com/questions/9328273/lock-mousewheel-scroll-to-focus-div – Cosades

當然，你不希望人們爲你寫代碼，必須試過什麼？你可以用$（'window'）來檢測窗口的滾動，on（'scroll'，function（）{}）;'，然後你可以不斷地將瀏覽器重新定位到頂部並滾動div來計算用戶已滾動。 –

編輯帖子。 –

我剛剛收拾你的代碼一點點，固定壓痕等

至於實際滾動的DIV，當你打的位置，使用animate實際上模仿scrolling效果，一旦你知道你已經達到在底部，您可以在滾動功能中添加另一個if語句以停止重置滾動位置。

var lastScroll; 
var scrollPosition = $(window).scrollTop(); 
var reachedBottom = false; 
var phonePositionTop = $('#phoneContainerID').position().top; 
var phonePositionBottom = phonePositionTop + $('#phoneContainerID').height(); 

$(window).scroll(function() { 

    if(scrollPosition >= phonePositionTop && scrollPosition < phonePositionBottom && reachedBottom == false){ 
     var difference = currentScroll - lastScroll; 
     // Keep resetting scroll to the phoneContainerTop position 
     $(".main").css({"margin-top": phonePositionTop}); 
     var scrollLimit = -100; 
     if ($('#phoneContainerID').position().top < scrollLimit) { 
      //Once the scroll limit is less than -100 (scrolled up 100 pixels) 
      // Disable our 'pause' effect, and continue 
      reachedBottom = true; 
     } 

    } 
});

我還沒有測試過這個，但是我只是給你一個從這裏出發的想法。

我希望我幫了一點點！

來源

2013-11-03 22:38:55

停止滾動頁面，滾動DIV

回答

相關問題