有多個可見項目的jquery滾動條

滾動條內的項目是display:inline-block，並且在任何給定時間在x和y平面中可以有多個項目可見。

任何人都可以幫助我的滾動？

這是一個jsfiddle我目前有。動畫滑動不起作用。我試圖讓所有的內容包裝的外面一起滑動，同時項目的下一個頁面中滑動。

if (~~ (counter/totalVisible) == currentPage) { 
    item.show(); 
    item.animate({ 
     "left": -(item.position().left) 
    }); 
} else { 
    item.animate({ 
     "left": -(item.position().left) 
    }); 
    item.hide(); 
}

來源

2013-08-17 Geoff

那麼，重新發明輪子？考慮使用：http://rocha.la/jQuery-slimScroll – diosney

我知道有一百萬個滾動條可用。我有更多的功能比標準的，這就是爲什麼我創建一個自定義滾動。 – Geoff

Okey，很高興知道:) – diosney

如果你想動畫的位置，在你的CSS，你必須給你正在嘗試動畫position: relative;屬性的元素。

考慮一個簡單的例子，當我點擊文檔頁面時，我想要一個塊向右移動。

Codepen素描：http://cdpn.io/vdCth

HTML

<div class='item'></div>

CSS

.item { 
    background: #ccc; 
    display: inline-block; 
    height: 50px; 
    position: relative; 
    width: 50px; 
}

jQuery的

$('html').on('click', function(){ 
    $('.item').animate({ 
    left: "+=50" 
    }, 200, function(){ 
    }); 
});

現在從你的CSS刪除position: relative;，你會看到動畫不再出現，因爲在這個叉證明：http://cdpn.io/LcakK

希望有所幫助。

來源

2013-08-17 22:39:13 kunalbhat

有多個可見項目的jquery滾動條

回答

相關問題