颜色选择器弹出窗口退出当前视图答案

【问题标题】：Colorpicker popup goes out of current view颜色选择器弹出窗口退出当前视图
【发布时间】：2021-08-31 21:46:24
【问题描述】：

如何让我的颜色选择器弹出窗口检测它是否不适合并将其显示在按钮上方？目前它超出了当前视图。我想让它能够检测到它不在当前视图中，而是在按钮上方打开。

这是我目前所拥有的：

const Picker = styled.div`
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
`;

const Swatch = styled.div`
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
`;

const PopOver = styled.div`
  position: absolute; 
  z-index: 100;
  top: calc(100% + 2px);
  bottom: 20rem;
  left: 6rem;
  border-radius: 9px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
`;

    <Picker>
      <Label>{label}</Label>
      {isOpen && (
        <PopOver ref={popover}>
          <HexColorPicker color={color} onChange={onChange} />
        </PopOver>
      )}
      <Swatch style={{ backgroundColor: color }} onClick={() => toggle(!isOpen)} />
    </Picker>

【问题讨论】：

标签： css reactjs typescript styled-components color-picker

【解决方案1】：

打开弹窗时，查看y位置加上渲染项的height是否大于窗口的screenHeight。如果是，请更改 y 位置或添加一个将弹出框置于触发按钮上方的类。

如果在添加弹出框高度之前 y 位置大于 screenHeight，那么您可能需要从 y 位置减去 scrollTop 值，以获得屏幕坐标而不是文档坐标中的适当位置。

【讨论】：