調整大小：調整元素的大小超出屏幕末端

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

可能是最好把大小調整手柄放在左邊。