React+Tailwind CSS实现底部发送栏锁定并禁止下方滚动

问题核心 #

发送消息表单使用absolute bottom-0但未给父容器设置定位基准，导致滚动时消息内容会穿透到表单下方；同时消息列表未设置独立滚动容器且未预留底部空间，最后一条消息会被发送框遮挡。

修复步骤 #

1. 修改Chat.jsx结构与样式

重构外层容器布局，让消息区域成为独立滚动容器：

import React, { useState, useEffect, useRef } from 'react';
import Message from './Message';
import SendMessage from './SendMessage';
import { db } from '../firebase';
import { query, collection, orderBy, onSnapshot } from 'firebase/firestore';

const style = {
  chatContainer: `flex flex-col h-screen relative`,
  main: `flex flex-col p-[10px] flex-1 overflow-y-auto pb-[56px]`,
};

const Chat = () => {
  const [messages, setMessages] = useState([]);
  const scrollAnchor = useRef();

  useEffect(() => {
    const q = query(collection(db, 'messages'), orderBy('timestamp'));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const newMessages = [];
      querySnapshot.forEach((doc) => {
        newMessages.push({ ...doc.data(), id: doc.id });
      });
      setMessages(newMessages);
    });
    return () => unsubscribe();
  }, []);

  // 消息更新后自动滚动到底部
  useEffect(() => {
    scrollAnchor.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div className={style.chatContainer}>
      <main className={style.main}>
        {messages.map((message) => (
          <Message key={message.id} message={message} />
        ))}
        <span ref={scrollAnchor}></span>
      </main>
      <SendMessage />
    </div>
  );
};

export default Chat;

2. 调整SendMessage.jsx样式

优化表单定位，确保固定在底部且水平居中：

import React, { useState } from 'react';
import { auth, db } from '../firebase'
import { addDoc, collection, serverTimestamp } from 'firebase/firestore'

const style = {
  form: `h-14 w-full max-w-[728px] flex text-xl absolute bottom-0 left-1/2 transform -translate-x-1/2`,
  input: `w-full text-xl p-3 bg-gray-900 text-white outline-none border-none`,
  button: `w-[20%] bg-green-500`,
};

const SendMessage = () => {
  const [input, setInput] = useState('');

  const sendMessage = async (e) => {
    e.preventDefault()
    if (!input.trim()) {
        alert('请输入有效消息')
        return
    }
    const { uid, displayName } = auth.currentUser
    await addDoc(collection(db, 'messages'), {
        text: input,
        name: displayName,
        uid,
        timestamp: serverTimestamp()
    })
    setInput('')
  }

  return (
    <form onSubmit={sendMessage} className={style.form}>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        className={style.input}
        type='text'
        placeholder='输入消息'
      />
      <button className={style.button} type='submit'>
        发送
      </button>
    </form>
  );
};

export default SendMessage;

关键修复说明 #

• chatContainer设置flex flex-col h-screen relative：让聊天区域占满屏幕，同时作为发送框的定位基准
• main区域添加flex-1 overflow-y-auto：让消息列表自动填充剩余空间并独立滚动
• pb-[56px]：预留发送框高度（h-14=56px），避免最后一条消息被遮挡
• 将滚动锚点移至消息列表内部，通过useEffect监听消息变化自动滚动，替代手动触发逻辑
• 发送框添加left-1/2 transform -translate-x-1/2：确保表单在屏幕水平居中

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