嘿，我正在建设网站与React和顺风，我有以下问题：我想包括在导航栏中的图标，点击后，作为弹出窗口打开搜索栏。当弹出窗口打开时，我想阻止滚动，我想留在页面上的同一位置。
主要是我在web中发现的是将body/html中的overflow属性更改为hidden。我用各种可能的方式操纵它，但它对我不起作用。将overflow:hidden设置为body&html只会隐藏滚动条，但我仍然可以通过鼠标滚轮滚动。只有当我添加height:100%到这个-页面实际上阻止滚动，但还有另一个问题：页面会一直转到顶部。因此，当我向下滚动页面并单击导航栏中的搜索图标时，弹出窗口出现，但页面不在单击之前的相同位置，而是一直到顶部。
为什么overflow:hidden仍然在后台滚动页面？如果我需要添加高度：100%如何使网站留在同一位置，而不是滚动到顶部？有没有别的办法解决这个问题？
下面是与issue相关的代码：

header.tsx：（带弹出图标）

export const Header = ({
}: HeaderProps) => {
 
  const [isSearchOpened, setIsSearchOpened] = React.useState(false);

  const handleSearchOpen = () => {
    document.body.classList.add('searchInView');
    document.documentElement.classList.add('searchInView');
    setIsSearchOpened(true);
  };

  const handleSearchClose = () => {
    document.body.classList.remove('searchInView');
    document.documentElement.classList.remove('searchInView');
    setIsSearchOpened(false);
  };

  return (
    <>
      <div className='relative '>
        {isSearchOpened && <SearchBar onClose={handleSearchClose} />}
      </div>
      <nav>
      <div>Other things....</div>
            <BsSearch
              className='cursor-pointer text-white hover:text-green'
              size={20}
              onClick={handleSearchOpen}
            />
           
      </nav>
    </>
  );
};

searchbar.tsx（弹出）

export const SearchBar = ({ onClose }: SearchBarProps) => {

  return (
    <div
      id='popup'
      onClick={onClose}
      className='fixed left-0 right-0 z-[99] mx-auto mt-navHeight h-[100vh] w-[100%] -translate-y-navHeight bg-gradient-to-b from-[rgba(0,83,17,0.8)] to-[rgba(51,0,116,0.8)] px-4 backdrop-blur-md md:px-16'
    >
      <div className='relative mx-auto h-full w-[90%] max-w-[57.5rem] pt-16 md:w-[70%]'>
       
      </div>
    </div>
  );
};

globals.css（classname应用于body&html）

.searchInView {
  overflow: hidden !important;
  height: 100%;
}