实现 Telegram 页面滚动时头像的吸附效果

Telegram 聊天窗口滚动时，消息块中的用户头像会吸附在页面底部，直至所在的消息块离开窗口底部；向上滚动时，头像会出现有趣的头像堆积效果；我很好奇这个效果是怎么实现的，于是就有了今天这篇文章。

原理剖析

其实实现这个效果的原理很简单，粘性定位元素会相对于离它最近的可滚动容器进行定位，同时又会受到父元素显示范围的约束。利用这个特性可以很方便的实现头像吸附的效果，更多原理可以看张鑫旭老师的博客：https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/

具体来说，给头像所在的img元素添加position: sticky，同时设置bottom: 0；这样一来，头像会吸附在离它最近的可滚动容器底部，直至头像所在的消息块彻底离开页面底部时才停止吸附。

Code

<style>
  .wrapper {
    width: 400px;
    height: 600px;
    border: 1px solid #000;
    margin: 100px auto;
    padding: 10px;
    overflow-y: auto;
  }

  .item {
    border: 1px solid rgb(138, 55, 55);
    display: flex;
    border-radius: 10px;
    margin-bottom: 10px;
  }

  .img-wrapper {
    display: flex;
    align-items: flex-end;
    /* 使 img 元素默认在消息块底部对齐 */

    margin-inline: 10px;
  }

  p {
    margin: 0;
  }

  .img-wrapper img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;

    position: sticky;
    bottom: 0;
    /* 吸附在离它最近的可滚动容器底部 */
  }
</style>

<div class="wrapper">
  <div class="item">
    <div class="img-wrapper">
      <img src="/logo_new.png" />
    </div>
    <p>hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello world! hello
      world! hello world! hello world! hello world! hello world! hello world! hello world! </p>
  </div>
</div>

<script>
  const wrapper = document.querySelector(".wrapper");
  const str = Array.from(new Array(20)).map(() => wrapper.innerHTML).join("");
  wrapper.innerHTML = str;
</script>

最终效果