Question

我使用以下代码滚动（在单击按钮后）到DOM中的textarea并聚焦光标。它工作正常。

    $(document).on('click', '.test-comment', function() {
    if (obj_test.u != '0') {
        var commentsform = $(this);
        if (!commentsform.hasClass('disabled')) {
            commentsform.addClass('disabled');
        } else {
            commentsform.removeClass('disabled');
        }

        $(this).closest('#post-' + $(this).data('post_id')).find('#masonry-meta-commentform-' + $(this).data('post_id')).scroll(function() {
            if ($('#post-masonry #masonry').length) {
                $('#post-masonry #masonry').masonry('reloadItems').masonry('layout');
            } else if ($('#masonry').length) {
                $('#masonry').masonry('reloadItems').masonry('layout');
            }
        }).find('textarea').focus();

        return false;
    } else {
    // do something

        return false;
    }
});

但它看起来像下图。如您所见，textarea在桌面窗口的底部被剪切。

有没有办法为我的代码设置偏移量（例如100px）以进一步滚动？所以看起来像下面的图像并保持焦点功能？还是其他任何想法？

Answer 1

您可以计算右侧滚动顶部，首先使用offset().top获取textarea的顶部，然后在此添加textarea的高度（以便在视图中滚动整个部分）和一些额外的距离（例如30）如果你还需要在它下面加上按钮。

$(document).on('click', '.test-comment', function() {
if (obj_test.u != '0') {
    var commentsform = $(this);
    if (!commentsform.hasClass('disabled')) {
        commentsform.addClass('disabled');
    } else {
        commentsform.removeClass('disabled');
    }

    $(this).closest('#post-' + $(this).data('post_id')).find('#masonry-meta-commentform-' + $(this).data('post_id')).scroll(function() {
        if ($('#post-masonry #masonry').length) {
            $('#post-masonry #masonry').masonry('reloadItems').masonry('layout');
        } else if ($('#masonry').length) {
            $('#masonry').masonry('reloadItems').masonry('layout');
        }
    });//

    // HERE COMES YOUR SCROLLING CODE
    var $targetTextArea =  $(this).closest('#post-' + $(this).data('post_id')).find('#masonry-meta-commentform-' + $(this).data('post_id')).find('textarea');
    var textAreaTop = $targetTextArea.offset().top;
    var textAreaHeight = $targetTextArea.height();
    var scrollHeight = textAreaTop + textAreaHeight + 30; // added 30 to also include the submit button below the text area
    $("html, body").animate({"scrollTop": scrollHeight}, 500, function(){
        $targetTextArea.focus();
    });//animate()




    return false;
} else {
// do something

    return false;
}

}）;

使用.scroll（）函数＆amp;添加偏移到jquery位置。 DOM中的.find（selector）

1 个答案: