鎖塊到滾動元素底部

我想添加一個調整大小的抓地力到我的元素。由於用戶可以調整它們必須能夠滾動的元素的大小。我遇到的問題是，我們的要求指出，調整大小手柄在滾動條旁邊浮動，即使它滾動。鎖塊到滾動元素底部

我做了一個的jsfiddle是接近我所需要的：JSFiddle

<html> 
<head> 
<style> 
#common-module-inner 
{ 
    height: 200px; 
} 

#common-module 
{ 
    width: 500px; 
    position: absolute; 
    overflow: auto; 
} 

#gs-resize-handle 
{ 
    position: absolute; 
    width: 11px; 
    height: 11px; 
    bottom: 0; 
    right: 0; 
    background-color: #f00; 
} 
</style> 
</head> 
<body> 
<div id="common-module"> 
    <div id="common-module-inner"> 
     <p>content</p> 
     <p>content</p> 
     <p>content</p> 
     <p>content</p> 
     <p>content</p> 
     <p>content</p> 
     <p>content</p> 
    </div> 
    <div id="gs-resize-handle"> 
     </div> 
</div> 
</body> 
</html>

紅色矩形表示調整大小的抓地力。問題在於，當用戶滾動內容時，紅色矩形保持靜止，而不是停留在元素底部。

我能找到的最接近的東西是將一個元素對接到頁面的底部，但是其中大部分似乎依賴於窗口，這不是我想要的。

我不反對基於jQuery的解決方案，但是有可能用html/css來實現這一點嗎？

謝謝。

來源

2014-07-08 user3816304

做兩個修改：

從#common-module刪除overflow:auto;並將其添加到#common-module-inner

#common-module-inner { 
    height: 200px; 
    overflow: auto; 
} 
#common-module { 
    width: 500px; 
    position: absolute;  
}

這裏是演示：在Chrome & Firefox

DEMO

來源

2014-07-08 13:14:14

你爲什麼這麼難？

就拿CSS3和使用：

resize:both;

你的元素。

JSFiddle

這樣就不需要使用jquery或javascript，

刪除紅色塊只使用手柄。

來源

2014-07-08 13:02:40 JiFus

測試不正是被要求，但它很簡單，很乾淨。 –

我不知道爲什麼你應該採取困難的道路，如果你可以使用簡單和純粹的CSS。 – JiFus

是的，你是對的。但是有時瀏覽器兼容性或遺留代碼或插件的支持可能會出現問題。 +1翻轉。 –

你需要的是將fixed作爲fixed放置在#common-module（也是固定的）內，但由於這是不可能的，我認爲你需要類似於jQuery的解決方案。由於調整大小的可能性是基於JavaScript（我想），您將使用JavaScript。

來源

2014-07-08 13:03:13 uruk

鎖塊到滾動元素底部

回答

相關問題