React输入框聚焦滑动至屏幕底部偏移问题求助

当前代码使用transform: translateY(calc(100vh - ${formHeight}px))，这个计算逻辑存在问题：它让输入框从自身初始位置向下移动「屏幕高度减去自身高度」的距离，但输入框初始位置本身就离顶部有pt-32、mt-6等间距，导致移动后完全超出屏幕底部，需要滚动才能看到。

下面提供两种可行的解决方案：

方案一：改用固定定位（推荐） #

聚焦时将输入框固定在屏幕底部，这种方式更直观，无需复杂的位置计算：

'use client';
import { useState, useRef } from 'react';
import Header from '@/components/Header';
import SendChatButton from '@/components/buttons/SendChatButton';

export default function Home() {
  const [isInputFocused, setInputFocused] = useState(false);
  const formRef = useRef(null);

  const formStyle = isInputFocused
    ? { 
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        padding: '0 1rem', // 对应section的p-4，保持左右间距一致
        backgroundColor: 'white', // 避免下方内容透过来
      }
    : {};

  return (
    <main>
      <section className='p-4 pt-32'>
        <div>
          <h1 className='text-6xl font-bold'>
            Your very own<br /> personal designer
          </h1>
          <h2 className='text-xl mt-6'>Makes finding outfits so much easier</h2>
        </div>
        <form 
          ref={formRef}
          style={formStyle}
          className="mt-6 flex shadow-md transition-all duration-1000 ease-in-out"
        >
          <input
            type="text"
            placeholder='Message your personal designer...'
            className="p-2 border border-gray-300 rounded-md block w-full text-sm outline-none"
            onFocus={() => setInputFocused(true)}
            onBlur={() => setInputFocused(false)}
          />
          <SendChatButton />
        </form>
      </section>
    </main>
  );
}

关键调整说明： #

• 聚焦时设置position: fixed，将输入框固定在屏幕底部，left:0和right:0让它铺满屏幕宽度
• 添加padding: 0 1rem和section的p-4（1rem）保持一致，避免输入框贴边
• 增加backgroundColor: white防止页面下方内容透过输入框显示
• 将transition-transform改为transition-all，让固定定位和原位置的切换更平滑

方案二：精确计算移动距离 #

如果不想用固定定位，可以通过计算输入框当前位置到屏幕底部的距离，设置正确的translateY值：

'use client';
import { useState, useRef, useEffect } from 'react';
import Header from '@/components/Header';
import SendChatButton from '@/components/buttons/SendChatButton';

export default function Home() {
  const [isInputFocused, setInputFocused] = useState(false);
  const formRef = useRef(null);
  const [translateY, setTranslateY] = useState(0);

  // 计算输入框需要移动的距离
  const calculateMoveDistance = () => {
    if (!formRef.current) return 0;
    const rect = formRef.current.getBoundingClientRect();
    // 屏幕底部到输入框当前底部的距离，就是需要向下移动的距离
    return window.innerHeight - rect.bottom;
  };

  useEffect(() => {
    if (isInputFocused) {
      setTranslateY(calculateMoveDistance());
    } else {
      setTranslateY(0);
    }
  }, [isInputFocused]);

  // 窗口大小变化时重新计算（可选）
  useEffect(() => {
    const handleResize = () => {
      if (isInputFocused) {
        setTranslateY(calculateMoveDistance());
      }
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [isInputFocused]);

  const formStyle = {
    transform: `translateY(${translateY}px)`,
    transition: 'transform 1000ms ease-in-out'
  };

  return (
    <main>
      <section className='p-4 pt-32'>
        <div>
          <h1 className='text-6xl font-bold'>
            Your very own<br /> personal designer
          </h1>
          <h2 className='text-xl mt-6'>Makes finding outfits so much easier</h2>
        </div>
        <form 
          ref={formRef}
          style={formStyle}
          className="mt-6 flex shadow-md"
        >
          <input
            type="text"
            placeholder='Message your personal designer...'
            className="p-2 border border-gray-300 rounded-md block w-full text-sm outline-none"
            onFocus={() => setInputFocused(true)}
            onBlur={() => setInputFocused(false)}
          />
          <SendChatButton />
        </form>
      </section>
    </main>
  );
}

关键调整说明： #

• 使用getBoundingClientRect()获取输入框的当前位置，计算出它到屏幕底部的距离
• 聚焦时设置translateY为这个距离，刚好让输入框移动到屏幕底部
• 添加窗口 resize 监听，确保窗口大小变化时输入框位置依然正确

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