Jquery 滚动后可调整大小的重新定位句柄

Question

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

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

}

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

$(function () {

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

不幸的是，当我使用滚动条时，我的可调整大小的手柄会移动。我想让它留在容器的底部。这是 fiddle.

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');
}

Jquery 滚动后可调整大小的重新定位句柄

Jquery resizable reposition handle after scroll

css

jquery-ui-resizable