React+Material-UI导航栏最右侧菜单图标横向滚动跟随问题求解

针对你遇到的菜单按钮无法随横向滚动停在最右侧的问题，可通过以下两种方案修复：

方案一：改用Flex布局（推荐，更适合导航栏场景） #

将导航栏容器的Grid布局替换为Flex布局，利用justify-content: space-between实现元素两端对齐，天然适配横向滚动场景：

return (
  <>
    <div style={{
        width: "100%",
        position: "relative",
        backgroundColor: "black",
        padding: "0",
        display: "flex", // 替换为flex布局
        alignItems: "center", // 垂直居中元素
        gap: "1rem" // 可选，控制元素间距
      }}>
        <img src={AthuleBarImage} alt='Athule Logo Bar' />

        {/* 按钮无需设置grid相关属性，自动靠右侧 */}
        <IconButton
          id="basic-button"
          aria-controls={open ? 'basic-menu' : undefined}
          aria-haspopup="true"
          aria-expanded={open ? 'true' : undefined}
          onClick={handleClick}
          className={styles.default}
          style={{ marginLeft: "auto" }} // 关键：自动推到最右侧
        >
          <MenuIcon sx={{ color: "white" }} />
        </IconButton>

        {/* Menu组件代码保持不变 */}
        <Menu
          id="basic-menu"
          anchorEl={menuAnchor}
          open={open}
          onClose={handleClose}
          MenuListProps={{
            'aria-labelledby': 'basic-button',
          }}
        >
          {loggedIn ? (
            [(<MenuItem onClick={toProfile} key="profile">
              <AccountBoxIcon className={styles.dropdownIcon} />
              Profile
            </MenuItem>),
            (<MenuItem onClick={toChangePassword} key="password">
              <LockResetIcon className={styles.dropdownIcon} />
              Change Password
            </MenuItem>),
            (<MenuItem onClick={toLogout} key="logout">
              <LogoutIcon className={styles.dropdownIcon} />
              Logout
            </MenuItem>)]
          ) : (
            [(<MenuItem onClick={toLogout} key="login">
              <LoginIcon className={styles.dropdownIcon} />
              Login
            </MenuItem>)]
          )}
        </Menu>

      </div>
  </>
);

方案二：保留Grid布局，改用绝对定位固定按钮 #

如果想继续使用Grid布局，可通过绝对定位将按钮固定在容器右上角，确保滚动时位置不变：

return (
  <>
    <div style={{
        width: "100%",
        position: "relative", // 保持relative作为定位父容器
        backgroundColor: "black",
        padding: "0",
        display: "grid",
        gridTemplateColumns: "20% 20% 20% 20% 20%",
        gridTemplateRows: "auto",
      }}>
        <img src={AthuleBarImage} alt='Athule Logo Bar' />

        <IconButton
          id="basic-button"
          aria-controls={open ? 'basic-menu' : undefined}
          aria-haspopup="true"
          aria-expanded={open ? 'true' : undefined}
          onClick={handleClick}
          className={styles.default}
          style={{
            position: "absolute", // 设置绝对定位
            right: "1rem", // 距离右侧的间距
            top: "50%", // 垂直居中
            transform: "translateY(-50%)",
          }}>
          <MenuIcon sx={{ color: "white" }} />
        </IconButton>

        {/* Menu组件代码保持不变 */}
        <Menu
          id="basic-menu"
          anchorEl={menuAnchor}
          open={open}
          onClose={handleClose}
          MenuListProps={{
            'aria-labelledby': 'basic-button',
          }}
        >
          {loggedIn ? (
            [(<MenuItem onClick={toProfile} key="profile">
              <AccountBoxIcon className={styles.dropdownIcon} />
              Profile
            </MenuItem>),
            (<MenuItem onClick={toChangePassword} key="password">
              <LockResetIcon className={styles.dropdownIcon} />
              Change Password
            </MenuItem>),
            (<MenuItem onClick={toLogout} key="logout">
              <LogoutIcon className={styles.dropdownIcon} />
              Logout
            </MenuItem>)]
          ) : (
            [(<MenuItem onClick={toLogout} key="login">
              <LoginIcon className={styles.dropdownIcon} />
              Login
            </MenuItem>)]
          )}
        </Menu>

      </div>
  </>
);

改动说明 #

• 方案一通过Flex布局的margin-left: auto让按钮自动填充左侧空间，始终靠右侧，适配各种屏幕尺寸和横向滚动场景，是导航栏布局的常规做法。
• 方案二利用绝对定位将按钮脱离Grid布局流，直接绑定到容器右上角，不受Grid列布局的限制，滚动时位置固定。

内容的提问来源于stack exchange，提问作者Root Shaw