滚动

Question

我在容器中有一个html表。容器有一个高度，其溢出设置为auto以创建滚动条

.table-container {
   height: 175px;
    border-bottom: 2px solid #EEEEEE;
    overflow-y: auto;

}

我还使用可调整大小的JQuery UI使容器可调整大小。

$(function () {

$(".table-container").resizable({ handles: "s" });
});

不幸的是，当我使用滚动条时，我的可调整大小的句柄会移动。我希望它留在容器的底部。这是小提琴。

https://jsfiddle.net/oyb3r6u8/1/ enter link description here

Answer 1

您可以使用jquery根据拖动位置在拖动过程中保持手柄的位置。

以下是代码的完整更新：https://jsfiddle.net/k3e5ma2s/

$(function () {

    $(".table-container").resizable({ handles: "s", resize: updateHandle });

    $( ".table-container" ).scroll(function() {
        updateHandle();
    });

    updateHandle();

});

function updateHandle() {
    table = $('.table-container');
    var bottom =  table.scrollTop() + table.outerHeight(true) - $('.ui-resizable-handle').outerHeight() - 5;
    $('.ui-resizable-handle').css('top', bottom + 'px');
}