为了账号安全,请及时绑定邮箱和手机立即绑定

如何滚动到溢出的Div中的元素?

如何滚动到溢出的Div中的元素?

慕森王 2019-12-12 10:20:41
我在div内有20个列表项,一次只能显示5个。滚动到第10项然后到第20项的好方法是什么?我知道所有物品的高度。该scrollTo插件可以做到这一点,但是如果没有真正了解它的源代码,就很难理解。我不想使用这个插件。比方说,我有一个功能,需要2元$parentDiv,$innerListItem,既不$innerListItem.offset().top也不$innerListItem.positon().top让我对$ parentDiv正确scrollTop的。
查看完整描述

3 回答

?
MYYA

TA贡献1868条经验 获得超4个赞

这是我自己的插件(会将元素放置在列表的顶部。专门用于overflow-y : auto。可能无法使用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)中进行了测试。


查看完整回答
反对 回复 2019-12-12
?
一只斗牛犬

TA贡献1784条经验 获得超2个赞

以上答案将内部元素放置在溢出元素的顶部,即使它在溢出元素内部也是如此。我不希望这样,所以我对其进行了修改,以在元素处于可见状态时不更改滚动位置。


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;

};


查看完整回答
反对 回复 2019-12-12
  • 3 回答
  • 0 关注
  • 510 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信