javascript - 滚动时将对象置于屏幕中心

Question

我有一个网页，右侧有一个列表，右侧有一个 TreeView ，并且有一个拖放界面，可以将对象从一个移动到另一个。中间有一个垃圾桶，用来删除元素。问题是，页面可能会变成 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 很像，但坐标/位置基于视口(viewport)，而不是文档。因此，虽然 position:absolute 元素将随页面滚动，但 position:fixed 元素将保持在与视口(viewport)相关的位置。