滾動時在屏幕上顯示中心對象

Question

我有一個右側列表和右側樹形視圖的Web頁面，並具有拖放界面以將對象從一個移動到另一個。中間有一個垃圾桶用於刪除物品。問題是，頁面可能會變成5000px長。當用戶滾動時，如何讓垃圾桶在屏幕中居中？預先感謝您的答案！

Answer 1

你可以使用CSS來修復垃圾桶的位置。

.trash-can 
{ 
    position: fixed; 
    left: /*value here*/; 
    top: /*value here*/; 
} 

Answer 2

爲了保持固定在特定位置上的元件，使用position: fixed，例如：

#trashcan { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 200px; 
    height: 200px; 
    margin-left: -100px; /* half the width */ 
    margin-top: -100px; /* half the height */ 
} 

position: fixed很像position: absolute但基於視口，而不是文檔的座標/位置。所以雖然position: absolute項目將與頁面一起滾動，但position: fixed項目將保持與視口相關的位置。