Radix UI导致右侧白条

首页布局与白条问题：原因、踩坑、发现过程与解决方案

背景

在辉煌环球（Next.js + Tailwind + shadcn 风格 UI）项目中，陆续出现几类视觉与交互问题，集中在：

首页 Banner 与底部留资表单
「专业顾问一对一定制购房服务」区块
页脚联系方式

本文按 原因 → 怎么发现 → 踩坑 → 怎么解决 整理，便于以后排查类似问题。

原因

背景图使用了 Next.js Image 的 fill + object-cover：

tsx 复制代码

<Image src="..." fill className="object-cover" />

父容器高度由内容或 min-h 决定，与图片原始比例不一致时，object-cover 会裁切图片以填满容器，导致建筑、渐变等元素显示不全。

怎么发现的

逐页检查 Banner 和底部表单，对比设计稿，发现多处背景边缘被切掉，尤其是宽屏下更明显。

踩坑

只改 object-position 无法根治，根因是 容器比例 ≠ 图片比例
给容器加 overflow-hidden 会进一步裁切
各页面各自写背景逻辑，改一处漏一处

怎么解决的

新增统一组件 FullBleedBackground：

tsx 复制代码

<Image width={W} height={H} className="block h-auto w-full" />
<div className="col-start-1 row-start-1 z-10 flex ...">{children}</div>

要点：

图片用真实宽高，h-auto w-full 按比例完整显示
内容用 CSS Grid 叠层 ，不用 absolute inset-0 单独撑高度
去掉不必要的 overflow-hidden

覆盖所有 Banner 和底部留资表单（首页、about、study、expo、城市页等）。

问题二：点击表单区域出现滚动条

原因

FullBleedBackground 早期用 absolute inset-0 叠内容：

容器高度 = 背景图高度（宽屏下约 260px）
表单含 py-12 等，实际高度远超背景图
内容向下溢出，浏览器为容纳溢出产生滚动条

怎么发现的

点击「专业顾问一对一定制购房服务」外层区域时，页面出现多余纵向滚动条，且可滚动范围很小。

踩坑

以为是 Select 下拉导致，实际是 背景容器高度不够
给 section 加 overflow-hidden 能藏住滚动条，但会裁切内容，不是正解

怎么解决的

把 FullBleedBackground 从绝对定位改为 Grid 叠层：

图片与内容在同一 grid cell
容器高度 = max(图片高度, 内容高度)
内容参与文档流，不再溢出

问题三：表单 Label、页脚邮箱换行

原因

购房表单标签列宽 72px，加上 tracking-[0.16em]，「电话/微信」被挤成两行
页脚邮箱继承 tracking-[0.12em]，在窄列里也会断行

怎么发现的

用户直接反馈：「Label 不换行」「页脚邮箱怎么才能不换行」。

踩坑

无。属于样式微调，一次定位。

怎么解决的

位置	处理
购房表单	列宽 `72px` → `88px`，Label 加 `whitespace-nowrap shrink-0`
页脚邮箱	链接加 `whitespace-nowrap tracking-normal`

原因

HeroCarousel 的 slides 只有 1 张，但左右箭头和自动轮播逻辑未判断数量。

怎么发现的

用户反馈：「首页 banner 只有一张的时候，不显示切换按钮」。

怎么解决的

tsx 复制代码

{count > 1 && (<>上一张 / 下一张按钮</>)}
// 自动轮播也仅在 count > 1 时启动

问题五：点击下拉框后右侧出现白条（核心难题）

现象

点击「意向楼盘」等下拉时，页面右侧出现一条白色空白，背景图未铺满视口，固定导航也可能错位。

原因（根因）

组件库：Radix UI（@radix-ui/react-select）

项目 components/ui/select.tsx 基于 Radix Select，底层在打开下拉时会：

给 body 加 data-scroll-locked
通过 react-remove-scroll 用 内联 style + !important 给 body 加 margin-right，补偿滚动条消失后的宽度

同时 globals.css 里有：

css 复制代码

html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

scrollbar-gutter: stable 会预先预留滚动条槽位。

两者叠加 = 右侧多出一道空白。

不是 shadcn 本身的问题，而是 Radix 弹层（Select、Popover 等）+ 全局滚动条策略 的冲突。同类问题在用 shadcn / Radix 的项目里较常见。

怎么发现的

用户截图标注右侧白条，且仅在 点击下拉时 出现
排除背景图裁切、表单溢出后，锁定为 打开 Select 触发的布局变化
查 Radix Select 源码，确认内部硬编码了 RemoveScroll
查 react-remove-scroll-bar，确认用 内联 !important 写 margin-right
尝试 CSS 覆盖无效 → 确认内联 !important 优先级高于样式表

踩坑记录

次序	尝试	预期	实际
①	`body[data-scroll-locked] { margin-right: 0 }`	取消补偿	无效（被内联 style 覆盖）
②	去掉 `overflow-y: scroll`，并取消所有补偿	简化逻辑	更严重（滚动条行为更乱）
③	只保留 `overflow-y: scroll`，去掉 `scrollbar-gutter`	去掉双重预留	仍有白条
④	同时取消 body 和固定元素的补偿类	全面清零	去掉 `overflow-y: scroll` 后反而更糟

关键认知：

普通 CSS 无法覆盖 Radix 的内联 !important
scrollbar-gutter 与 Radix 补偿 不能简单二选一，需要分工配合
不能同时乱改 overflow-y、scrollbar-gutter 和补偿逻辑

怎么解决的（最终方案）

1. 新增 ScrollLockFix 组件（全站 layout.tsx 挂载）

监听 data-scroll-locked，下拉打开时用 JS 清除多余偏移：

tsx 复制代码

document.body.style.setProperty("margin-right", "0", "important");
document.body.style.setProperty("padding-right", "0", "important");
// 同步修正 .width-before-scroll-bar、.right-scroll-bar-position

用 MutationObserver + requestAnimationFrame，在 Radix 写入样式后立即覆盖。

2. globals.css 配合

css 复制代码

html {
  scrollbar-gutter: stable;  /* 正常浏览时防左右闪动 */
  overflow-y: scroll;
}

body[data-scroll-locked] .width-before-scroll-bar {
  margin-right: 0 !important;
}

分工：

scrollbar-gutter：日常浏览，防止滚动条显隐导致跳动
ScrollLockFix：弹层打开时，取消 Radix 的重复宽度补偿

问题归因总表

问题	主要原因	是否组件库
背景图裁切	`fill` + `object-cover` 写法	否，项目实现
点击出现滚动条	`absolute` 叠层导致溢出	否，项目实现
Label / 邮箱换行	列宽与字间距	否，Tailwind 样式
单图仍显示箭头	未判断 `slides.length`	否，项目逻辑
下拉右侧白条	Radix Select + `react-remove-scroll`	是，Radix UI

关键文件

文件	作用
`components/ui/FullBleedBackground.tsx`	背景完整显示 + Grid 叠层
`components/ui/ScrollLockFix.tsx`	修复 Radix 下拉右侧白条
`components/ui/select.tsx`	Radix Select 封装（问题来源）
`components/sections/PropertyConsultLeadForm.tsx`	购房留资表单
`app/globals.css`	滚动条与弹层样式
`app/layout.tsx`	挂载 `ScrollLockFix`

经验总结

装饰性背景图 ：优先 h-auto w-full + 真实尺寸，慎用 fill + object-cover。
背景 + 内容叠放：用 Grid 叠层，让容器高度随内容撑开。
Radix / shadcn 弹层 ：会锁滚动并用内联 style 补偿宽度，与 scrollbar-gutter 并用时要额外处理。
内联 !important 无法用普通 CSS 覆盖，需要 JS 在 DOM 变更后同步修正。
排查顺序 ：先复现触发条件（点击下拉）→ 看 body 属性与 inline style → 查组件库源码 → 再动全局 CSS。

验证清单

各页 Banner / 表单背景完整、无裁切
点击表单区域无多余滚动条
购房表单 Label、页脚邮箱单行显示
单图 Banner 无切换箭头
点击「意向楼盘」下拉，右侧无白条
顶部导航与页面内容对齐、无横向跳动

修改后请 硬刷新 （Mac：Cmd + Shift + R）验证，避免缓存干扰。

Radix UI导致右侧白条

首页布局与白条问题：原因、踩坑、发现过程与解决方案

背景

问题一：Banner 和表单背景图被裁切

原因

怎么发现的

踩坑

怎么解决的

问题二：点击表单区域出现滚动条

原因

怎么发现的

踩坑

怎么解决的

问题三：表单 Label、页脚邮箱换行

原因

怎么发现的

踩坑

怎么解决的

问题四：首页 Banner 单图仍显示切换按钮

原因

怎么发现的

怎么解决的

问题五：点击下拉框后右侧出现白条（核心难题）

现象

原因（根因）

怎么发现的

踩坑记录

怎么解决的（最终方案）

问题归因总表

关键文件

经验总结

验证清单