页面滚动后的最近元素带有过渡

Question

我有一个聊天小部件，只是一个小方块 div，在页面加载时绝对位于浏览器的垂直中心 window。当用户向下滚动页面时，我希望小部件随页面滚动，即消失，但一旦滚动停止，聊天小部件就会转换回垂直中心。

我四处寻找，但似乎找不到任何东西。

最近的是这个。 Element transform transition between appearing 'relative' and 'fixed' not smooth

非常感谢任何帮助。我宁愿避免 jquery if poss 而只使用 vanilla JS。

干杯理查德

Answer 1

我觉得如果你想要流畅的话用animejs会更简单

let timeout;

window.addEventListener("scroll", (ev) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    anime({
      targets: ".chat",
      top: window.scrollY + window.innerHeight / 2,
      easing: "easeOutCubic",
      duration: 500
    });
  }, 100);
});

.chat {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: red;
}
.idk {
  height: 400vh;
}

<script src="https://unpkg.com/animejs@3.2.1/lib/anime.min.js"></script>
<div class="chat">
  hello
</div>
<div class="idk">
</div>

页面滚动后的最近元素带有过渡

Recenter element following page scroll with transition

javascript

html

css

transition

center