导航栏下拉菜单内容溢出屏幕时的左移适配方案

先给右侧下拉菜单的父容器设置相对定位，确保下拉内容的绝对定位有参照：

#taskbar_right .dropdown {
  position: relative;
}

然后对下拉内容做如下样式设置，核心是让它和父元素右侧对齐，同时限制最大宽度避免溢出：

#taskbar_right .dropdown-content {
  position: absolute;
  right: 0; /* 下拉菜单与父容器右侧精准对齐 */
  max-width: calc(100vw - 16px); /* 最大宽度设为屏幕宽度减去边距，防止溢出 */
  overflow-y: auto; /* 内容过多时显示垂直滚动条 */
  /* 可选：如果需要宽度自适应内容，可将max-width替换为width: max-content */
}

这个方案无需依赖固定宽度值，不管触发下拉的按钮（dropdown-name）宽度多少，都能保证下拉菜单和右侧完美对齐，同时不会溢出屏幕。

如果需要自定义最大宽度上限（比如最多显示400px宽），可以用min()函数结合屏幕宽度：

#taskbar_right .dropdown-content {
  position: absolute;
  right: 0;
  width: max-content; /* 宽度自适应内容 */
  max-width: min(400px, calc(100vw - 16px)); /* 取自定义宽度和屏幕剩余宽度的较小值 */
  overflow-y: auto;
}

如果纯CSS无法满足更复杂的动态场景（比如需要实时根据窗口变化调整），可以用原生JS实现精准偏移：

// 获取所有右侧下拉菜单容器
const rightDropdowns = document.querySelectorAll('#taskbar_right .dropdown');

rightDropdowns.forEach(dropdown => {
  const content = dropdown.querySelector('.dropdown-content');
  const trigger = dropdown.querySelector('.dropdown-name');

  // 点击触发下拉时调整位置
  trigger.addEventListener('click', () => {
    requestAnimationFrame(() => {
      const contentRect = content.getBoundingClientRect();
      const viewportWidth = window.innerWidth;

      if (contentRect.right > viewportWidth) {
        // 计算超出屏幕的距离，左移对应像素
        const offset = contentRect.right - viewportWidth;
        content.style.transform = `translateX(-${offset}px)`;
      } else {
        content.style.transform = 'translateX(0)';
      }
    });
  });

  // 窗口大小变化时重新调整（仅当下拉菜单显示时）
  window.addEventListener('resize', () => {
    if (content.offsetParent !== null) {
      const contentRect = content.getBoundingClientRect();
      const viewportWidth = window.innerWidth;
      if (contentRect.right > viewportWidth) {
        const offset = contentRect.right - viewportWidth;
        content.style.transform = `translateX(-${offset}px)`;
      } else {
        content.style.transform = 'translateX(0)';
      }
    }
  });
});

这段代码会实时检测下拉菜单是否超出屏幕右侧，若超出则自动计算偏移量并左移，确保内容完全在可视区域内，窗口尺寸变化时也会重新校验调整。

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