スクロール時に画面中央に表示されるオブジェクト

Question

右側のリストと右側のツリービューを持つWebページがあり、オブジェクトを一方から他方に移動するドラッグアンドドロップインタフェースがあります。真ん中にはアイテムを削除するためにゴミ箱があります。問題は、ページの長さが5000ピクセルになる可能性があることです。ユーザーがスクロールするとゴミ箱を画面の中央に置くにはどうすればいいですか？あなたの答えに事前に感謝します！

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の項目はビューポートに関連して配置されたままになります。