React Airbnb风格应用模态框输入框仅滚动后可聚焦的问题排查及替代方案咨询

我最近在开发一个Airbnb风格的React应用，遇到了一个非常诡异的冲突问题：头部导航栏的滚动收缩功能和登录模态框的输入框聚焦逻辑互相干扰了，想请大家帮忙分析下原因，再给点替代方案的建议。

问题背景 #

我的头部导航栏初始是展开状态，当用户滚动页面时会自动收缩。为了检测是否处于页面顶部，我在页面最上方放了一个1px的不可见div，用IntersectionObserver监听它的交叉状态来切换头部的展开/收缩状态——这部分原本工作得很正常。

直到我加上登录/注册模态框后，怪事发生了：

• 点击登录按钮能正常打开模态框，输入框也能正常显示，但完全无法聚焦，连onFocus事件都不会触发
• 只有当我滚动页面（触发头部收缩后），输入框才能正常接收焦点
• 我排查了一圈：确认没有元素覆盖输入框、点击事件能触发（打了日志）、模态框打开时IntersectionObserver并没有触发

关键发现 #

我偶然发现，如果给那个1px的.observer-top div加上display: none，输入框就能正常聚焦了，但这样直接破坏了头部的滚动收缩功能。

这个div的样式我已经设置得尽可能“隐形且无害”了：

.observer-top {
  position: absolute;
  top: 0;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

它既看不见，也不能被点击，理论上完全不应该影响上层的模态框输入框，但实际就是会干扰焦点分配。

我的疑问 #

1. 为什么一个看不见、无法交互的1px div会影响React应用里的焦点分配？这是浏览器的已知行为，还是React特有的 quirks？
2. 有没有更靠谱的滚动检测方式，能避免这种和模态框的冲突？

相关代码片段 #

AppHeader.jsx

import { useState, useEffect, useRef } from 'react'
import { useLocation, NavLink } from 'react-router-dom'
import useToggle from './hooks/useToggle'
import AirbnbLogoIcon from './icons/AirbnbLogoIcon'
import HamburgerIcon from './icons/HamburgerIcon'
import MainNav from './MainNav'
import Popover from './Popover'
import HamburgerMenu from './HamburgerMenu'
import LoginSignup from './LoginSignup'
import StayFilterMinimized from './StayFilterMinimized'
import StayFilterExpanded from './StayFilterExpanded'

const AppHeader = ({ filterBy, setActiveSection, activeSection }) => {
  const [isAtTop, setIsAtTop] = useState(true)
  const [isHeaderExpanded, setIsHeaderExpanded] = useState(true)
  const [isMenuOpen, toggleMenu] = useToggle(false)
  const menuRef = useRef()
  const [isLoginModalOpen, toggleLoginModal] = useToggle(false)
  const loginModalRef = useRef()
  const topRef = useRef()
  const currPage = useLocation()

  useEffect(() => {
    if (currPage.pathname !== '/') {
      setIsAtTop(false)
      setIsHeaderExpanded(false)
    }

    const observer = new IntersectionObserver(([entry]) => {
      setIsAtTop(entry.isIntersecting)
      if (entry.isIntersecting) {
        setIsHeaderExpanded(false)
      }
    }, { root: null, threshold: 0 })

    if (topRef.current) {
      observer.observe(topRef.current)
    }

    return () => {
      if (topRef.current) observer.unobserve(topRef.current)
    }
  }, [currPage.pathname])

  return (
    <>
      <div className="observer-top" ref={topRef}></div>
      <header className={`app-header main-layout full ${(isAtTop && currPage.pathname === '/') || isHeaderExpanded ? 'header-large' : 'header-small' }`}>
        <section className="header-content">
          <h1>
            <NavLink to="/" className="logo">
              <AirbnbLogoIcon className="logo-icon" />
              <img className='logo-full' src="https://res.cloudinary.com/dbbj46yzt/image/upload/v1748125476/ChatGPT_Image_May_25_2025_01_24_19_AM_ih42tm.png" />
            </NavLink>
          </h1>
          {(isAtTop && currPage.pathname === '/') || isHeaderExpanded && <MainNav />}
          <div className="menu-wrapper">
            <button className="btn-hamburger-menu" onClick={toggleMenu}>
              <HamburgerIcon />
            </button>
            {isMenuOpen && (
              <Popover style={{ right: 0 }} menuRef={menuRef}>
                <HamburgerMenu onClose={() => toggleMenu(false)} onLoginClick={() => toggleLoginModal(true)} />
              </Popover>
            )}
          </div>
        </section>
        {isLoginModalOpen && <LoginSignup onClose={() => toggleLoginModal(false)} loginModalRef={loginModalRef} />}
        {!isHeaderExpanded && (
          <StayFilterMinimized 
            filterBy={filterBy} 
            isHidden={isAtTop && currPage.pathname === '/'} 
            setIsHeaderExpanded={setIsHeaderExpanded} 
            setActiveSection={setActiveSection} 
          />
        )}
        {(isHeaderExpanded || isAtTop) && (
          <StayFilterExpanded 
            filterBy={filterBy} 
            activeSection={activeSection} 
            setActiveSection={setActiveSection} 
          />
        )}
      </header>
      <div 
        className={`header-backdrop ${!isAtTop && isHeaderExpanded ? 'visible' : '' }`} 
        onClick={() => {
          setIsHeaderExpanded(false)
          setActiveSection('')
        }}
      ></div>
    </>
  )
}

export default AppHeader

AppHeader.scss

$clr-white: #ffffff;
$gray-3: #f7f7f7;
$clr-text-primary: #222222;
$rem: 1rem;

.observer-top {
  position: absolute;
  top: 0;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.app-header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  background: linear-gradient(180deg, $clr-white 39.9%, $gray-3 100%);
  height: rem(200px);
  border-block-end: 1px solid #ebebeb;
  margin-inline: 0;

  &.header-small {
    height: rem(80px);
    .filter-bar {
      display: none;
    }
  }
}

.header-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba($color: $clr-text-primary, $alpha: 0.25);
  cursor: pointer;
  z-index: 500;
  transition: opacity .5s ease;
  opacity: 0;
  pointer-events: none;

  &.visible {
    opacity: 1;
    pointer-events: auto;
  }
}

LoginSignup.jsx

export function LoginSignup({ onClose, loginModalRef }) {
  return (
    <div className="modal-content" ref={loginModalRef}>
      <h2>Log in or sign up</h2>
      <h3>Welcome to Rarebnb</h3>
      <button onClick={onClose}>x</button>
      <form>
        <label htmlFor="user-email">Email</label>
        <input type="email" id="user-email" placeholder="Enter your email" />
        <label htmlFor="user-password">Password</label>
        <input type="password" id="user-password" placeholder="Enter your password" />
        <button type="submit">Continue</button>
      </form>
    </div>
  )
}

可能的原因分析和解决方案建议 #

可能的原因

虽然你的.observer-top div设置了pointer-events: none，但浏览器的焦点分配逻辑可能和元素的堆叠上下文或文档流位置有关：

• 这个div是页面最顶部的绝对定位元素，即使看不见，可能在浏览器的内部焦点路由中占据了“最高优先级”的位置，干扰了输入框的焦点获取
• 也有可能是IntersectionObserver监听的元素在浏览器的渲染队列中存在某种隐性的优先级，间接影响了焦点事件的处理

替代方案

方案1：修复现有Observer元素的样式

给.observer-top添加z-index: -1，让它完全处于所有可交互元素的堆叠层级下方，彻底避免干扰：

.observer-top {
  position: absolute;
  top: 0;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1; /* 新增 */
}

方案2：替换为Scroll事件监听（无需额外DOM元素）

抛弃那个1px的div，直接监听window的scroll事件来检测页面是否在顶部，记得用节流优化性能：

// 自己实现简单的节流函数（或使用lodash的throttle）
const throttle = (func, delay) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      func(...args);
      lastCall = now;
    }
  };
};

// 在AppHeader的useEffect中替换原有的Observer逻辑
useEffect(() => {
  const handleScroll = () => {
    // 用10px作为阈值，避免scrollY的微小波动导致状态频繁切换
    const currentIsAtTop = window.scrollY < 10;
    setIsAtTop(currentIsAtTop);
    if (currentIsAtTop) {
      setIsHeaderExpanded(false);
    }
  };

  // 节流100ms，避免scroll事件频繁触发
  const throttledScroll = throttle(handleScroll, 100);
  window.addEventListener('scroll', throttledScroll);

  // 组件卸载时移除监听
  return () => window.removeEventListener('scroll', throttledScroll);
}, []);

方案3：模态框打开时临时暂停Observer

在模态框打开时，暂时停止监听那个1px div，关闭时恢复：

// 在AppHeader中修改useEffect，加上isLoginModalOpen的依赖
useEffect(() => {
  if (currPage.pathname !== '/') {
    setIsAtTop(false);
    setIsHeaderExpanded(false);
  }

  const observer = new IntersectionObserver(([entry]) => {
    setIsAtTop(entry.isIntersecting);
    if (entry.isIntersecting) {
      setIsHeaderExpanded(false);
    }
  }, { root: null, threshold: 0 });

  if (topRef.current && !isLoginModalOpen) {
    observer.observe(topRef.current);
  }

  return () => {
    if (topRef.current) observer.unobserve(topRef.current);
  };
}, [currPage.pathname, isLoginModalOpen]); // 新增isLoginModalOpen作为依赖

内容来源于stack exchange