與jquery同時滾動2個滾動條

是否可以使用一個滾動條滾動2個滾動條？與jquery同時滾動2個滾動條

2011-03-22 Benjamin

回答你的其他問題有什麼不對？ – 2011-03-22 09:40:36

如果您投票並接受答案，人們會更傾向於回答您的問題。話雖如此 - 看看這個插件（快速谷歌搜索） - http://blogs.msdn.com/b/matt/archive/2009/03/19/synchronizing-scrollbars-using-jquery.aspx – Bob 2011-03-22 11:58:39

您只需使用與scroll事件關聯的函數將一個元素的scrollTop屬性與另一元素的scrollTop綁定即可。

東西線沿線的：

$('.linked').scroll(function(){ 
    $('.linked').scrollTop($(this).scrollTop());  
})

與該功能，只要您使用其中之一的滾動條一類的linked所有元素將滾動。（我假定垂直滾動，如果你想要水平滾動，請按照scrollLeft的方法做同樣的操作）

請參閱http://jsfiddle.net/g8Krz/510/瞭解上面的工作示例。

來源

2011-03-25 11:50:08 beeglebug

不是一個Firefox解決方案... – 2014-05-19 08:49:57

它在Firefox中正常工作。我認爲問題在於jsfiddle中的圖像不再存在，因此我將其更新爲指向新圖像。代碼本身是jQuery，所以應該跨瀏覽器。 – beeglebug 2014-05-19 10:11:30

如何將它們解耦？解決方案紅豆杉給工作很好，以將滾動條連接在一起..但什麼shud被做去分離他們都??回覆ASAP – 2014-05-21 11:26:58

（追加beeglebug）：

對於水平的「關聯性」滾動使用：

$('.linked').scroll(function(){ 
    $('.linked').scrollLeft($(this).scrollLeft()); 
});

來源

2013-08-01 18:40:48

我想有點起色添加到beeglebug的溶液（其已經工作接近完美）。

如果您使用鼠標滾輪在某些瀏覽器（如Opera）發現很慢SCROLLING，儘量使用唯一ID的DIV，而不是類：

$('#master').scroll(function(){ 
$('#slave').scrollTop($(this).scrollTop()); 
});

我有這個問題並嘗試了很多解決方案，但這個最終是最簡單的。大膽猜測，我認爲OPERA在滾動時一直按課程標識DIV時會出現一些性能問題。（只注意到CPU使用率提高海量同時使用類作爲標識符）

來源

2016-06-27 19:09:57 Lox

我相信問題不在於.classes和#ids。問題在於，你將這些類鏈接到了一起。如果你把它們連接到對方（就像我必須做的那樣），那麼鼠標輪問題依然存在。工作中找工作的原因是因爲你只在一個方向上聯繫他們。（滾動奴隸不會讓主人滾動） – 2016-11-05 17:59:37

如果遇到當您使用與beeglebug解決方案連接滾動鼠標滾輪滾動速度慢，這裏是一招解決它。

很酷的事情是，它是有點緊湊，它不使用任何標識，只類，這麼多的更可持續。

// First add the class "linked-scrollbar" to the elements you want to link 

// Then manually or dynamically add an attribute which will contain 
// the data if the element is currently scrolling or not 
$('.linked-scrollbar').attr("data-scrolling", "false"); 

$('.linked-scrollbar').scroll(function(){ 
    if($(this).attr("data-scrolling") == "false"){ 
     $('.linked-scrollbar').not(this).attr("data-scrolling", "true"); 
     $('.linked-scrollbar').not(this).scrollLeft($(this).scrollLeft()); 
    } 
    $(this).attr("data-scrolling", "false"); 
});

這是一個jsfiddle顯示該錯誤和修復。

來源

2017-04-27 08:50:31 Pilou

這與問題無關。 – 2017-04-27 09:10:51

是的。當你使用beeglebug解決方案鏈接多個滾動條時，一些人（比如我）的滾動速度非常慢（由於事件之間的循環）。這是一個顯示這個錯誤的[jsfidle]（https://jsfiddle.net/sgcer/1274/）。我的回答只是對面臨同樣問題的人的改進（或修復）。 – Pilou 2017-04-27 09:59:00

與jquery同時滾動2個滾動條

回答

相關問題