jquery - 可调整大小：调整元素大小超出屏幕末端

Question

我正在使用 jquery UI 来调整元素的大小。我有一个元素应该可以调整到宽度，例如 1200 像素或 1600 像素（根据用户的喜好）。但是当在这个元素之前有元素时（我将所有元素水平排列），如果鼠标光标到达屏幕的末尾，调整大小的动作就会停止。

你可以在这里测试它：http: //gopeter.de/clients/dustin/

最右边的框是可调整大小的。

有谁知道如何防止这种情况发生？我应该检查光标位置并在到达终点时扩展元素吗？或者有没有其他的技术？

Answer 1

也许您可以调整正文的大小并滚动以允许连续调整大小：

var body = $('body');

$('#resize').resizable({
    handles: "e,s,se",
    resize: function (event, ui) {
        var width = body.width(),
            diff = width - (width - (this.offsetLeft + this.offsetWidth));

        body.width(diff).scrollLeft(diff);
    }
});

或（少 jQuery）

$('#resize').resizable({
    handles: "e,s,se",
    resize: function (event, ui) {
        var width = document.body.clientWidth,
            diff = width - (width - (this.offsetLeft + this.offsetWidth));
        document.body.style.width = diff + 'px';
        document.body.scrollLeft = diff;
    }
});

这是相关的小提琴：http: //jsfiddle.net/jeff_mccoy/UpmNq/2/

请注意，您可以通过仅调整每 X 个像素 (!diff % 3) 的大小来加快速度，但调整大小也会有点生涩。

Answer 2

最好将调整大小手柄放在左侧。