reactjs 如何防止页面在弹出窗口打开时滚动

fivyi3re  于 2023-05-28  发布在  React
关注(0)|答案(2)|浏览(294)

嘿,我正在建设网站与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%;
}
wmomyfyw

wmomyfyw1#

如果是弹出窗口,则应该使用position:absolute,而不是position:fixed。这样可以防止滚动到顶部,但您需要更改div的位置,使其看起来像弹出窗口。

7rtdyuoh

7rtdyuoh2#

修复,身体上的overflow:hidden不适用于网站上使用的React Lenis。将data-lenis-prevent添加到popup div工作。

相关问题