基于React.js与Material-IO的移动端自适应弹出方向下拉菜单CSS实现问询

纯CSS无法独立实现该效果，必须配合JS做视口位置判断，CSS仅负责两种弹出方向的样式定义

基础CSS实现（兼容Material UI框架） #

/* 触发按钮外层容器，必须设置相对定位 */
.menu-trigger-container {
  position: relative;
  display: inline-block;
}

/* 菜单通用基础样式 */
.adaptive-popup-menu {
  position: absolute;
  min-width: 160px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  padding: 6px 0;
  margin: 0;
  list-style: none;
  z-index: 1000;
  /* 弹出动画 */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 向下弹出样式：定位在按钮底部 */
.adaptive-popup-menu--down {
  top: calc(100% + 6px);
  left: 0;
  transform-origin: top left;
}

/* 向上弹出样式：定位在按钮顶部 */
.adaptive-popup-menu--up {
  bottom: calc(100% + 6px);
  left: 0;
  transform-origin: bottom left;
}

/* 隐藏状态样式 */
.adaptive-popup-menu.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
}

React逻辑实现（适配你的技术栈） #

你是React开发者，可以参考下面的极简实现逻辑，位置判断的核心代码通用：

import { useState, useRef } from 'react';

const AdaptiveDropdown = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [popupDirection, setPopupDirection] = useState('down');
  const triggerBtnRef = useRef(null);
  const menuListRef = useRef(null);

  const handleMenuToggle = () => {
    if (!isMenuOpen) {
      // 打开菜单前计算位置
      const triggerPos = triggerBtnRef.current.getBoundingClientRect();
      const menuHeight = menuListRef.current.offsetHeight;
      const remainingBottomSpace = window.innerHeight - triggerPos.bottom;
      // 底部剩余空间足够放下菜单+间隙就向下弹，否则向上弹
      setPopupDirection(remainingBottomSpace >= menuHeight + 6 ? 'down' : 'up');
    }
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <div className="menu-trigger-container" ref={triggerBtnRef}>
      <button onClick={handleMenuToggle}>⋮</button>
      <ul
        ref={menuListRef}
        className={`adaptive-popup-menu adaptive-popup-menu--${popupDirection} ${isMenuOpen ? '' : 'is-hidden'}`}
      >
        <li>分享</li>
        <li>收藏</li>
        <li>不感兴趣</li>
        <li>举报</li>
      </ul>
    </div>
  )
}

Material UI 原生适配提示 #

你使用的Material UI内置的Menu组件已经自带位置自适应逻辑，不需要手动写全部CSS，只需要动态配置anchorOrigin和transformOrigin属性，再按需覆盖自定义样式即可。

内容的提问来源于stack exchange，提问作者AG Mohamed