Shadcn Select组件触发页面底部多余空白及滚动适配问题

问题核心 #

Shadcn Select基于Popper实现定位，默认以整个视口为基准计算位置，当它处于设置了overflow-y: scroll的自定义容器内时，会错误撑开页面高度导致底部空白，且下拉弹窗不会跟随容器滚动。

解决方案 #

1. 配置Popper定位上下文（关键步骤）

通过Radix UI的Popper配置，将Select的定位边界指定为自定义滚动容器，让弹窗基于容器计算位置，避免撑开整个页面。

步骤1：给自定义容器添加Ref

import { useRef } from "react";

// 在组件内定义Ref
const containerRef = useRef<HTMLDivElement>(null);

// 挂载到容器上
<div className="common-container" ref={containerRef}>
  {/* 表单及Select组件 */}
</div>

步骤2：修改Select的Popper配置

<Select 
  onValueChange={field.onChange}
  popper={{
    // 改为absolute定位，相对于容器而非视口
    strategy: "absolute",
    modifiers: [
      {
        name: "preventOverflow",
        options: {
          // 指定定位边界为自定义容器
          boundary: containerRef.current,
          // 可选：添加底部内边距避开固定导航栏，值根据导航栏高度调整
          padding: { bottom: 80 }
        },
      },
      {
        name: "flip",
        options: {
          boundary: containerRef.current,
        },
      },
    ],
  }}
>
  <FormControl>
    <SelectTrigger>
      <SelectValue
        placeholder={event ? dateObj.startHour : "01"}
      />
    </SelectTrigger>
  </FormControl>
  <SelectContent className="bg-white overflow-y-auto">
    {hourArray.map((hour) => (
      <SelectItem key={hour} value={hour}>
        {hour}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

2. 修正容器定位层级

确保自定义容器的父元素（或容器自身）设置相对定位，让absolute定位的弹窗能正确依附：

.common-container {
@apply relative flex flex-col flex-1 items-center gap-10 overflow-y-scroll py-10 px-5 md:px-8 lg:p-14 custom-scrollbar;
}

3. 优化页面布局适配固定导航栏

若导航栏为固定定位，给页面根元素添加底部内边距，避免内容被遮挡，同时防止Popper撑开页面到导航栏下方：

body {
  padding-bottom: 80px; /* 数值等于固定导航栏的高度 */
}

/* 假设固定导航栏的类名是fixed-nav */
.fixed-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
}

效果验证 #

配置完成后，Select下拉弹窗会：

• 基于自定义滚动容器定位，不再撑开整个页面底部
• 跟随容器滚动而移动
• 保持合适的弹窗尺寸，无需强制限制max-height

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