时间戳

首页 > 解决方案 > 颜色选择器弹出窗口超出当前视图

css - 颜色选择器弹出窗口超出当前视图

问题描述

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

这是我到目前为止所拥有的：

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>

标签： cssreactjstypescriptstyled-componentscolor-picker

解决方案

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

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

推荐阅读