我在div內(nèi)有20個列表項，一次只能顯示5個。滾動到第10項然后到第20項的好方法是什么？我知道所有物品的高度。該scrollTo插件可以做到這一點，但是如果沒有真正了解它的源代碼，就很難理解。我不想使用這個插件。比方說，我有一個功能，需要2元$parentDiv，$innerListItem，既不$innerListItem.offset().top也不$innerListItem.positon().top讓我對$ parentDiv正確scrollTop的。
3 回答
MYYA
TA貢獻(xiàn)1868條經(jīng)驗 獲得超4個贊
這是我自己的插件（會將元素放置在列表的頂部。專門用于overflow-y : auto?？赡軣o法使用overflow-x！）：
注意：elem是頁面將滾動到的元素的HTML選擇器。：由jQuery的，等支撐什么#myid，div.myclass，$(jquery object)，[DOM對象]等
jQuery.fn.scrollTo = function(elem, speed) {
$(this).animate({
scrollTop: $(this).scrollTop() - $(this).offset().top + $(elem).offset().top
}, speed == undefined ? 1000 : speed);
return this;
};
如果不需要動畫，請使用：
jQuery.fn.scrollTo = function(elem) {
$(this).scrollTop($(this).scrollTop() - $(this).offset().top + $(elem).offset().top);
return this;
};
如何使用：
$("#overflow_div").scrollTo("#innerItem");
$("#overflow_div").scrollTo("#innerItem", 2000); //custom animation speed
注意：#innerItem可以在里面的任何地方#overflow_div。并不一定必須是直子。
在Firefox（23）和Chrome（28）中進(jìn)行了測試。
一只斗牛犬
TA貢獻(xiàn)1784條經(jīng)驗 獲得超2個贊
以上答案將內(nèi)部元素放置在溢出元素的頂部，即使它在溢出元素內(nèi)部也是如此。我不希望這樣，所以我對其進(jìn)行了修改，以在元素處于可見狀態(tài)時不更改滾動位置。
jQuery.fn.scrollTo = function(elem, speed) {
var $this = jQuery(this);
var $this_top = $this.offset().top;
var $this_bottom = $this_top + $this.height();
var $elem = jQuery(elem);
var $elem_top = $elem.offset().top;
var $elem_bottom = $elem_top + $elem.height();
if ($elem_top > $this_top && $elem_bottom < $this_bottom) {
// in view so don't do anything
return;
}
var new_scroll_top;
if ($elem_top < $this_top) {
new_scroll_top = {scrollTop: $this.scrollTop() - $this_top + $elem_top};
} else {
new_scroll_top = {scrollTop: $elem_bottom - $this_bottom + $this.scrollTop()};
}
$this.animate(new_scroll_top, speed === undefined ? 100 : speed);
return this;
};
- 3 回答
- 0 關(guān)注
- 579 瀏覽
添加回答
舉報
0/150
提交
取消