1

我正在使用 react 进行 chrome 扩展。在我的应用程序中，我使用的是Rsuite Dropdown 组件。我正在使用包含大量项目的嵌套菜单，因此在某些菜单上，下拉菜单中的项目列表超出了屏幕。问题是我将鼠标悬停在菜单上，下拉菜单打开，它延伸到屏幕之外，窗口滚动到下拉菜单的底部，我的鼠标现在从菜单选择器上移开，因此下拉菜单关闭并且窗口向上滚动. 我的目标是在窗口不向下滚动到底部的情况下打开下拉菜单。 问题的GIF

我的代码：

我的 App.js 中只有一个组件，它只是我所有书签的下拉列表

<Dropdown title="Bookmarks">
      {bookmarks.map((mark) => {
          return (mark.children === undefined ? <BookmarkItem Bookmark={mark}/> : <BookmarkFolder Bookmarks={mark}/>)
      })}
  </Dropdown>

对于所有书签，我检查它是一个文件夹还是一个实际的书签，如果它是一个文件夹，我插入一个文件夹组件（它递归地做这件事）

const BookmarkFolder = ({Bookmarks}) => {

return (
    <Dropdown.Menu title={Bookmarks.title}>
        {Bookmarks.children.map((mark) => {
            return (mark.children === undefined ? <BookmarkItem Bookmark={mark}/> : <BookmarkFolder Bookmarks={mark}/>)
        })}
    </Dropdown.Menu>
);

};

如果它是书签，我将书签标题显示为下拉项

/* Limit title length to 25 characters */
const limitLength = (title) => {
    if (title.length > 25) {
        return `${title.substring(0, 22)}...`;
    }
    else {
        return title;
    }
}

return (
    <Dropdown.Item>
        {limitLength(Bookmark.title)}
    </Dropdown.Item>
);

当书签项呈现时，我一直在尝试以编程方式向上滚动页面：

useEffect(() => {
    window.setTimeout(() => window.scrollTo(0,0), 500);
}, []);

但这行不通。

非常感谢您的帮助！

4

0 回答 0