自定义Context Menu超出可视区域时的位置调整方案咨询

你需要在计算菜单位置时，同时处理向右展开超出窗口和向左偏移后超出左侧窗口两种边界情况，以下是修正后的完整实现：

function showContextMenu(x, y) {
    const menu = document.querySelector(".ctx-context-menu");
    // 先让菜单进入文档流（透明状态），确保能获取正确的宽高
    menu.style.opacity = "0";
    menu.classList.add("ctx-menu-visible");

    const menuWidth = menu.offsetWidth;
    const windowWidth = window.innerWidth;
    let finalLeft = x;

    // 判断向右展开是否会超出屏幕右侧
    if (x + menuWidth > windowWidth) {
        // 尝试将菜单定位到鼠标左侧
        finalLeft = x - menuWidth;
        // 防止菜单左移后超出屏幕左侧
        if (finalLeft < 0) {
            finalLeft = 0;
        }
    }

    // 设置最终位置并显示菜单
    menu.style.left = `${finalLeft}px`;
    menu.style.top = `${y}px`;
    menu.style.opacity = "1";
}

关键逻辑说明 #

• 先让菜单以透明状态渲染：保证offsetWidth能获取到真实的菜单宽度（如果菜单一开始是display: none，offsetWidth会返回0）
• 双重边界检查：
  1. 当鼠标位置+菜单宽度超过窗口宽度时，将菜单左移到鼠标左侧
  2. 如果左移后的位置小于0（比如菜单宽度比鼠标到左边缘的距离还大），就把菜单贴到屏幕左边缘，避免菜单整体超出左侧
• 用模板字符串简化单位拼接：${finalLeft}px比x + "px"更易读

额外注意事项 #

确保你的菜单CSS设置了正确的定位方式，比如：

.ctx-context-menu {
    position: fixed; /* 用fixed相对于视窗定位，适合右键菜单场景 */
    display: none;
    /* 其他样式 */
}

.ctx-menu-visible {
    display: block;
}

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