Question

我努力在scrollable div上移动输入元素。

我想在输入元素聚焦时将输入元素移动到顶部，意味着在div#up之后（输入1的初始位置）。 div应该向下滚动并将输入元素移动到顶部位置。

我尝试了以下代码，但它无法正常运行，

$('input').on('focus', function() {
     console.log($(this).offset());
     console.log($(this).position());
     $('input').removeAttr('style');
     var ot = parseInt($(this).offset().top),
         pt = parseInt($(this).position().top);
     var st = ot - 108; //108 is height of up div
     if (st - pt > 0) {
         st = st - pt;
     }
     if (st < 0) {
         st = ot - 108
     }
     console.log(st, ot, pt);
     $('#container').animate({
         scrollTop: st
     }, 200);
});

我也为online demo做了同样的事。

Answer 1

您需要考虑当前的滚动位置。

$('#container').animate({
     scrollTop: st+$('#container').scrollTop()
},200);

修正fiddle

Answer 2

我需要添加滚动位置的边距，然后它对我有效，

$('input').on('focus', function () {
    var ot=parseInt($(this).offset().top),
        pt=parseInt($(this).position().top);
    var st=ot-108;//108 is height of up div
    var scrollTop=$('#container').scrollTop();// this is I need to add
    if(scrollTop){ // if scroll in container
        st=st+scrollTop; // then add the margin of scroll
    }
    $('#container').animate({
        scrollTop: st
    },200);
});

Working Demo

Answer 3

当容器滚动时，内部输入元素的position（）。top会发生变化，因此你应该添加container.scrollTop。顺便说一下，你为什么考虑offset？这似乎毫无用处

$('input').on('focus', function () {
    var $container = $("#container");
    var scrollTop = $container.scrollTop() + $(this).position().top;
    $('#container').animate({
        scrollTop: scrollTop
    },200);
});

jsfiddle

将输入元素滚动到div中的顶部

3 个答案: