不同速度的垂直滾動列

我想創建一個3列的接口，每列都有混合內容（文本，圖像和視頻），並希望讓它們以不同的速度同時垂直滾動。有沒有一個相對簡單的方法來完成這與HTML，CSS和/或JavaScript？不同速度的垂直滾動列

PS。我知道視差滾動，但我遇到的實現似乎主要是使用圖像作爲背景來創建尺寸錯覺。

2011-08-15 Engin Erdogan

如果你還需要額外的幫助，你可以在這裏回答一個非常類似的問題：http://stackoverflow.com/questions/8950111/how-do-i-scroll-a-column-at-a-different-速度 –

$.fn.makeScroll = function(speed) { 
    var elem = this, 
     i = 0; 

    setInterval(function() { 
     elem.scrollTop(i++); // increment scroll top 
    }, speed); // run every 'speed' ms (so lower is faster) 
};

您可以啓用它想：

$('div:eq(0)').makeScroll(75); // moderate speed

來源

2011-08-15 15:35:21 pimvdb

@downvoter：你能告訴我你的理由嗎？ – pimvdb

這個答案非常有效，很好。我不是downvoter，但會提供pimvdb的分數，直到提供解釋爲止。 – XGreen

感謝@pimvdb，這與我正在尋找的非常接近 - 現在，我可以使用瀏覽器的本地滾動來控制此行爲（當我使用鼠標滾輪進行滾動時，這將是這些列滾動的方式）？ –

你想實際上滾動的內容？

$('.column').animate({ 
    scrollTop: $('.column').height() - $(window).height() 
}, 1000);

這將在1秒內滾動您的列。調整每列的速度。

編輯：

我是假設你的柱子爲窗口的高度。如果不是，則必須調整scrollTop。

來源

2011-08-15 15:36:18

感謝約瑟夫，我應該指出，我試圖讓mousewheel觸發這種行爲，有什麼想法？ –

不知道我完全明白你想要做什麼。你是說你不希望它自動滾動，而是當用戶滾動時，每一列的滾動速度應該不同。 –

確切地說，用戶滾動。我正在努力使這些列以不同的速度同時滾動。那有意義嗎？ –

我認爲，一個簡單的解決方法是創建一個具有以下屬性3個div元素：

溢出：隱藏; 寬度：x px（固定寬度）高度：x px（固定高度） top：0px; left：x px;

然後您必須捕獲onscroll事件並設置top-Attribute。

E.g.

DIV1：頂：-100px

DIV2：頂：-300px

DIV3：頂：-500px

我希望我的描述是明確的.. :) 這應該工作

來源

2011-08-15 15:38:57 funcoder

有趣的想法，會試試看。謝謝@funcoder！ –

不同速度的垂直滾動列

回答

相關問題