鼠標滾動到錨點

第一個問題在這裏，希望你們可以幫忙！我更像一個藝術家，而不是一個編碼員，所以我完全迷失在這裏。鼠標滾動到錨點

所以！我想要做的是這個。

我正在設置一個頁面，其中一個div的高度爲500％。它包含5個高20％的div，給我5個div，這些div完全適合任何屏幕。這裏是jFiddle上的一個例子：（http://jsfiddle.net/NwUvV/3/）

但是。

我需要的是我的鼠標滾輪在用戶滾動時完美滾動到每個div。如在用戶滾動鼠標滾輪，頁面移動到div＃2（無論是錨點還是ID）。我不想要的是人們能夠在屏幕上獲得div 1的一半，以及div 2的一半。這只是醜陋的。

這是一個網站在這裏的一個例子：http://www.beoplay.com/Products/BeoplayA9?utm_source=bang-olufsen.com&utm_medium=referral&utm_campaign=Bang-Olufsen.com%2BProduct%2BPage&utm_term=EXPERIENCE%2BA9&utm_content=BeoPlay%2BA9%2B%3A%2BAll#at-a-glance

瞭解如何使用您的鼠標滾輪它帶給你完美的下一個DIV？它看起來就像鎖定在一個錨上並順利滾動到它，不是嗎？

你們可以幫忙嗎？

非常感謝！

傑夫

來源

2012-11-25 Jeff Monk

想要發佈html嗎？創建一個小提琴？ http://www.jsfiddle.net – VIDesignz

我有一個小提琴安裝在這裏：[鏈接}（http://jsfiddle.net/NwUvV/3/），但沒有任何腳本，因爲我不知道如何開始這個。 Google一直沒用。 –

我已經爲你做了一個腳本傑夫。讓我知道你的想法！ – VIDesignz

使用jQuery的鼠標滾輪插件，你可以檢測滾動的方向，設置一個變量時滾動啓動並返回false;滾動完成後，您可以觸發自己的動畫，以檢測到滾動事件的方向滾動窗口。

您可以按照VIDesignz的要求設置小提琴，以便可以使用上述示例創建版本，也許？

來源

2012-11-25 18:17:46 MyStream

我發現的有關檢測滾動方向的所有信息都涉及實際滾動的頁面，因此您無法防止默認（不返回false），這意味着需要解決某些衝突才能生成平滑效果。 – Popnoodles

嗨，我的意思是滾輪事件，而不是實際的滾動方向。這裏有一個停止檢測的例子：http://stackoverflow.com/questions/3515446/jquery-mousewheel-detecting-when-the-wheel-stops – MyStream

但你需要知道它被推向哪個方向。它似乎只能通過比較$（window）.scrollTop（）和它以前的內容來實現。 – Popnoodles

在這裏，你去的人！看看這裏的例子EXAMPLE

var tempScrollTop = 0; 
var currentScrollTop = 0; 
var scrollHeight = $(window).height(); 
var newHeight = 0; 


function scrollIt() { 

$(window).off('scroll', scrollIt); 

    currentScrollTop = $(window).scrollTop(); 


    if (tempScrollTop < currentScrollTop) { 
     newHeight = newHeight + scrollHeight; 
     $('html').animate({scrollTop: newHeight}, 500, function(){ 
      var setScroll = setTimeout(function(){ 
       console.log('Animation Complete'); 
       tempScrollTop = $(window).scrollTop(); 
       $(window).on('scroll', scrollIt); 
      }, 10); 
     }); 

    } else if (tempScrollTop > currentScrollTop){ 
     newHeight = newHeight - scrollHeight; 
     $('html').animate({scrollTop: newHeight}, 500, function(){ 
      var setScroll = setTimeout(function(){ 
       console.log('Animation Complete'); 
       tempScrollTop = $(window).scrollTop(); 
       $(window).on('scroll', scrollIt); 
      }, 10); 
     }); 
    } 


} 

$(window).on('scroll', scrollIt);

來源

2012-11-25 19:43:38 VIDesignz

不知道你最終得到這個想通了或沒有，但我想我會拋出一個例子在那裏......

最終，我們需要攔截的滾動事件並確定用戶滾動的方式。一旦我們知道了哪個方向，我們就可以使用一個存儲的活動索引變量，並根據活動元素的偏移量對該主體進行動畫處理。

// setup active index variable 
var index = 0; 
// we will use this to determine scroll direction 
var lastTop = 0; 

$(window).on('scroll', function(ev) { 
    // get the current top offset 
    top = $(window).scrollTop(); 
    // Determine direction 
    if (top > lastTop) { 
     // down 
     index++ 
     // handle animation 
    } else { 
     // up 
     index-- 
     // handle animation 
    } 
    // update lastTop for next interaction 
    lastTop = top; 

}

代碼本身應該評論足以明白髮生了什麼，但如果你需要任何進一步的幫助或有任何問題，讓我知道。

查看完整的例子這裏 http://jsfiddle.net/NwUvV/71/

可以使用一些清理，以幫助過渡（可能與後備CSS3）等，但希望它橫跨得到一點，你可以把它從那裏。

包含的代碼將考慮可變大小的元素，如果需要，請檢查CSS中的註釋。

來源

2013-12-31 16:37:21

鼠標滾動到錨點

回答

相關問題