安卓手机锁定旋转时iframe内网页滚动方向异常求助

问题根源 #

安卓Chrome对transform: rotate()的坐标系处理会影响iframe的滚动逻辑：主页面旋转90度后，视觉上的横竖屏和浏览器内部的原始坐标系错位，导致iframe的滚动事件依然遵循原始屏幕方向，出现滚动方向反转的现象。

可行解决方案 #

1. 反向旋转iframe抵消主页面的旋转

给iframe设置与主页面相反的旋转角度，让它的坐标系和视觉方向对齐，同时调整尺寸和原点适配布局：

/* 主页面的旋转容器样式 */
.rotated-container {
  transform: rotate(90deg);
  transform-origin: top left;
  width: 100vh;
  height: 100vw;
  position: fixed;
  top: 0;
  left: 100%;
}

/* iframe反向旋转样式 */
.rotated-container iframe {
  transform: rotate(-90deg);
  transform-origin: top left;
  width: 100vh;
  height: 100vw;
  border: none;
}

这种方法能让iframe的滚动方向和视觉表现完全匹配，是最直接的修复方式。

2. 用viewport适配替代transform旋转

如果业务允许，避免使用transform旋转，直接通过修改viewport参数来适配横竖屏：

// 替换viewport属性，强制适配横屏逻辑（锁定竖屏场景下）
const viewportMeta = document.querySelector('meta[name="viewport"]');
viewportMeta.setAttribute('content', 'width=device-height, height=device-width, initial-scale=1.0, user-scalable=no');

之后调整页面布局适配新的宽高比，iframe的滚动会保持正常，没有坐标系错位问题。

3. 手动修正iframe滚动事件（兼容方案）

如果前两种方案无法实施，可通过JS监听iframe滚动事件，手动交换滚动轴的数值：

const targetIframe = document.querySelector('iframe');
const iframeDocument = targetIframe.contentDocument || targetIframe.contentWindow.document;

// 监听滚动并修正方向
iframeDocument.addEventListener('scroll', (event) => {
  event.preventDefault();
  const { scrollLeft, scrollTop } = event.target.documentElement;
  iframeDocument.documentElement.scrollTop = scrollLeft;
  iframeDocument.documentElement.scrollLeft = scrollTop;
});

注意：这种方案可能存在滚动卡顿、兼容性问题，仅作为临时替代方案使用。

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