滚动时屏幕上的中心对象

Question

我有一个网页，右边是一个列表，右边是一个树视图，还有一个拖放界面，可以将对象从一个移动到另一个。中间有一个垃圾桶，用于删除物品。问题是，页面可能会长达5000px。当用户滚动时，如何让垃圾桶在屏幕中居中？提前感谢您的回答！

Answer 1

要将元素固定在特定位置，请使用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项目将保留在与视口相关的位置。

Answer 2

您可以使用css来修复垃圾桶的位置。

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

Answer 3

显示的css适用于小物体。小，我的意思是，小于屏幕高度。当使用position：fixed时，无法滚动大于屏幕高度的对象。