在另一個div內錨點div滾動

Question

我想將一個div錨定到另一個div的右下角。只要父div不滾動，錨點就會工作。一個可用的JSFiddle設置爲Here。一旦div水平滾動，重新調整大小的句柄也會移動。

從此處可以看出，重新調整大小句柄的css使用botton和right屬性進行錨定。

ui-resizable-se { 
    cursor: se-resize; 
    width: 12px; 
    height: 12px; 
    right: 1px; 
    bottom: 1px; 
} 

如何實現滾動後的錨效應？

Answer 1

這是一個黑客攻擊的一位，但如果你換了包裝的滾動股利和設置包裝是可調整大小的，它工作得很好。

$("#wrapper").resizable();

#test { 
 
    width: calc(100% + 15px); 
 
    height: calc(100% + 15px); 
 
    background-color: lightgray; 
 
    overflow: scroll; 
 
} 
 

 
#wrapper { 
 
    width: 185px; 
 
    height: 185px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="test"> 
 
    <p> this is going to be a very long text !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p> 
 
    </div> 
 
</div>

爲了保全你想要的效果我設置#wrapper一組寬度和高度，同時允許#test來填補它的父與100％的寬度和高度。要將手柄移回#test，我將#wrapper設置得比您原來的要小，並使#test等於calc()。我認爲這給出了你正在尋找的結果。

當然，如果您不介意坐在#test之外的手柄，您可以在#wrapper上保留200的高度和寬度，在#test上保留100％的高度和寬度。或者你可以找到一種方法來覆蓋jqueryUI.css文件中的css。無論哪種方式手柄保持固定在相當不錯的地方。

Answer 2

也許你正在測試錯誤的內容。您使用的!!!!!!!!!!!!...表現得像一個長單詞，並添加了不需要的scroll。

當與適當的文本測試，它工作正常 - https://jsfiddle.net/afelixj/ayt41bw0/2/

作品同樣的方式作爲例子 - https://jqueryui.com/resizable/