WooCommerce商品编辑器侧边栏上滑消失问题求助

问题场景 #

在WooCommerce商品编辑器中：

• 向下滚动时，右侧侧边栏（#side-sortables）会切换为固定定位，方便操作
• 向上滚动时，侧边栏会被设置为绝对定位并偏移至视口外（消失）
• 即使在默认WordPress+WooCommerce环境、多浏览器（Chrome/Firefox/Edge）中均存在该问题，Firefox会提示滚动关联定位的性能警告
• 尝试直接用CSS强制固定侧边栏后，出现内容无法滚动的问题；折叠侧边栏内的Product image等模块时问题暂时消失，展开后复发

简易CSS解决方案 #

通过以下CSS规则，既能强制侧边栏保持固定，又能让过长的内容正常滚动，同时规避原动态定位的干扰：

/* 强制固定侧边栏，同时设置滚动区域 */
#post-body.columns-2 #side-sortables {
  position: fixed !important;
  top: 97px !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 280px !important;
  max-height: calc(100vh - 117px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 修复侧边栏内模块的布局兼容性 */
#side-sortables .postbox {
  margin: 0 0 10px 0 !important;
  width: 100% !important;
}

/* 确保父容器不干扰固定定位 */
#post-body.columns-2 #postbox-container-1 {
  position: static !important;
}

规则说明 #

1. 强制固定定位：用!important覆盖原JS动态修改的position属性，同时设置top、bottom、right锁定侧边栏位置，匹配原布局的间距
2. 启用滚动：通过max-height计算可用视口高度（减去顶部和底部间距），配合overflow-y: auto让内容超出时自动显示滚动条
3. 布局修复：调整侧边栏内模块的margin和宽度，避免滚动时出现错位或溢出
4. 父容器处理：将父容器设为静态定位，防止其相对定位属性影响固定侧边栏的布局

注意事项 #

• 可根据后台实际布局，微调top、right、width和max-height的数值，确保侧边栏位置与原布局一致
• 如果后台有自定义样式，可能需要调整CSS选择器优先级，保证规则生效

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