如何修复音乐厅选座程序缩放时的三类显示与滚动问题？

问题1：RTL/LTR模式下过度放大后无法滚动查看超出座位 #

原因 #

用transform: scale()缩放时默认以元素中心为原点，放大后座位向两侧超出容器；同时RTL/LTR模式下滚动容器初始位置不同，超出的一侧无法通过滚动触达。

修复方案 #

根据当前文本方向设置对应变换原点，让缩放从容器的对应角落启动，确保超出部分向滚动可达的方向扩展：

const seatContainer = document.querySelector('.seat-container');
const isRTL = seatContainer.dir === 'rtl' || document.documentElement.dir === 'rtl';
// RTL模式以右上角为缩放原点，LTR以左上角为原点
seatContainer.style.transformOrigin = isRTL ? 'top right' : 'top left';
seatContainer.style.transform = `scale(${currentScale})`;

若仍有滚动异常，缩放后手动校准滚动位置：

if (isRTL) {
  seatContainer.scrollLeft = seatContainer.scrollWidth - seatContainer.clientWidth;
} else {
  seatContainer.scrollLeft = 0;
}

问题2：放大时座位覆盖select-chair__select--screen元素 #

原因 #

屏幕元素的层级（z-index）低于座位，缩放后座位视觉尺寸变大，直接覆盖了屏幕元素。

修复方案 #

给屏幕元素设置更高层级，同时确保元素为非static定位（z-index仅对定位元素生效）：

.select-chair__select--screen {
  position: relative; /* 依布局可替换为absolute/fixed */
  z-index: 10; /* 数值需大于座位的z-index */
}

.seat-item {
  position: relative;
  z-index: 1; /* 明确座位层级，避免冲突 */
}

问题3：移动端缩小后座位文字移位至下方 #

原因 #

transform: scale()属于视觉缩放，移动端浏览器对缩放后的文本布局处理易出偏差；或座位未设置可靠的居中规则。

修复方案 #

1. 替换视觉缩放为比例化尺寸调整：直接修改容器字体大小和宽高，避免排版异常：

const currentScale = 0.8;
seatContainer.style.fontSize = `${currentScale * 100}%`;
seatContainer.style.width = `${originalWidth * currentScale}px`;
seatContainer.style.height = `${originalHeight * currentScale}px`;

2. 强制座位内文字居中：用弹性布局确保文字始终在座位容器内居中：

.seat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 文字过长时显示省略号 */
}

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