Html – How to prevent page from scroll on popup open

Hey I’m building website with react and tailwind and I have following issue:
I want to include icon in navbar that after click opens searchbar as popup. When popup is open I want to prevent body from scrolling and I want to stay in the same position on the page.

Mainly what I found in web is to change overflow property in body/html to hidden.
I manipulated with it in every possible way but it don’t work for me.
Setting overflow:hidden to body&html only hide the scrollbar but I can still scroll by mousewheel. Only when I add height:100% to this – the page actualy prevent scrolling but there is another issue: page is going all the way to the top. So when I scroll down the page and click search icon in navbar, popup appears but the page is not in the same position that was before click, it’s going all the way to the top.

Why overflow:hidden still scroll the page in the background? And if I need to add height:100% how to make site to stay in the same position and not scroll to the top? Is there some other way to fix this?

Here’s the code related to issue:

header.tsx: (with icon which opens a popup)

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 (popup)

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 applied to body&html)

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