如何为聊天框顶部添加消息消失渐变效果？

可以通过给聊天容器添加顶部渐变遮罩层，结合CSS渐变与滚动状态监听来实现需求效果，具体实现步骤如下：

1. HTML结构 #

给聊天容器嵌套父级容器，内部包含渐变遮罩和消息列表：

<div class="chat-wrapper">
  <div class="top-gradient"></div>
  <div class="message-list">
    <!-- 聊天消息项 -->
    <div class="msg">你好，这是第一条消息</div>
    <div class="msg">这是第二条消息</div>
    <div class="msg">这是第三条消息</div>
    <!-- 更多消息内容 -->
  </div>
</div>

2. CSS样式设置 #

• 聊天容器限制高度并开启垂直滚动，设置相对定位作为遮罩的定位参照
• 渐变遮罩固定在容器顶部，初始透明，滚动时显示渐变效果

.chat-wrapper {
  position: relative;
  width: 360px;
  height: 520px;
  overflow-y: auto;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.top-gradient {
  position: sticky;
  top: 0;
  height: 45px;
  background: linear-gradient(to bottom, #f8f9fa, rgba(248,249,250,0));
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

/* 滚动时显示遮罩 */
.chat-wrapper.scrolled .top-gradient {
  opacity: 1;
}

.message-list {
  padding: 10px;
}

.msg {
  padding: 8px 12px;
  margin-bottom: 8px;
  background-color: #fff;
  border-radius: 6px;
}

3. JavaScript监听滚动状态 #

监听聊天容器的滚动事件，根据滚动距离切换遮罩的显示状态：

const chatWrapper = document.querySelector('.chat-wrapper');

chatWrapper.addEventListener('scroll', () => {
  chatWrapper.classList.toggle('scrolled', chatWrapper.scrollTop > 0);
});

效果说明 #

• 当聊天窗口未滚动（scrollTop为0）时，顶部遮罩完全透明，不会遮挡消息
• 向上滚动使消息从顶部移出时，遮罩自动显示，通过渐变效果让顶部消息自然过渡消失，与示例效果匹配

内容的提问来源于stack exchange，提问作者Mircia George