React网页中点击输入框时让底部容器置于键盘上方的实现问题

问题核心在于你当前使用的scrollIntoView()会触发整个页面滚动，且底部容器的fixed定位会在键盘弹出时受视口高度变化影响，导致被遮挡。以下是针对性的调整方案：

关键调整点 #

• 把触发逻辑从onChange改为onFocus，精准对应“点击输入框”的操作时机
• 放弃全局滚动，改为控制底部容器所在的父滚动容器局部滚动
• 将底部容器的fixed定位改为absolute，让它相对于父容器固定，避免受视口变化干扰

完整实现代码 #

import React, { useRef } from 'react'

function App() {
  const bottomContainerRef = useRef(null);
  const scrollContainerRef = useRef(null);

  const handleInputFocus = () => {
    if (bottomContainerRef.current && scrollContainerRef.current) {
      // 计算滚动距离，让底部容器刚好出现在父容器可视区域底部
      const containerOffset = bottomContainerRef.current.offsetTop;
      scrollContainerRef.current.scrollTop = containerOffset - scrollContainerRef.current.clientHeight + bottomContainerRef.current.clientHeight;
    }
  };

  return (
    <div 
      ref={scrollContainerRef}
      style={{
        position: 'fixed',
        left: '0',
        bottom: '0',
        backgroundColor: 'red',
        overflow: 'auto',
        height: '50%',
        width: '100%',
        boxSizing: 'border-box'
      }} 
    >
      <div style={{ paddingBottom: '60px' }}> {/* 给底部容器预留显示空间 */}
        <div>Enter your name</div>
        <input
          type='text'
          onFocus={handleInputFocus}
        />
        <div 
          ref={bottomContainerRef}
          style={{
            position: 'absolute',
            left: '0',
            bottom: '0',
            backgroundColor: 'green',
            height: '5%',
            width: '100%',
            boxSizing: 'border-box'
          }}
        >
          Our Bottom container
        </div>
      </div>
    </div>
  );
}

export default App;

逻辑说明 #

• 通过父容器的scrollTop属性控制局部滚动，完全不会影响页面其他部分
• 底部容器改为absolute后，始终相对于父容器固定在底部，键盘弹出时父容器高度收缩，容器会自动跟随到新的视口底部
• 内容区域的paddingBottom避免底部容器遮挡输入框，确保输入操作正常进行

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