deviceorientation api 不能直接控制表格滚动，它仅提供设备姿态数据；需手动用 transform: translatex() 实现平滑滚动，配合死区裁剪、beta 映射、用户手势激活及容器溢出控制。
DeviceOrientation API 能否直接控制表格滚动
不能。DeviceOrientation 提供的是设备物理姿态（alpha、beta、gamma），不是滚动指令；浏览器也不允许 JS 直接劫持原生表格的 scrollLeft/scrollTop 行为来响应倾斜——除非你手动接管滚动逻辑。
为什么用 transform: translateX() 而非 scrollLeft
移动端 touch 滚动和 scrollLeft 在 iOS 上存在异步更新、抖动、被系统 scroll 阻断等问题；而 CSS transform 是合成层操作，响应更快、更顺滑，且能规避 scroll 事件冲突。
- 只对包裹表格的容器（如
<div class="table-container">）应用 <code>transform，不要直接 transform<table> <li>需设置 <code>overflow: hidden和固定宽高，否则 translate 会溢出或触发意外重排 - beta 值（前后倾斜）更适合映射水平滚动，gamma（左右倾斜）易受手臂微动干扰，实测中 beta 稳定性更高
如何防抖 + 映射倾斜角到滚动偏移
原始 beta 值范围约 [-90, 90]，但用户小幅倾斜（±5°）就触发滚动会太敏感；需做死区裁剪 + 线性缩放。
let lastTime = 0;
let scrollOffset = 0;
<p>function handleOrientation(e) {
const now = Date.now();
if (now - lastTime </p><p>const beta = e.beta || 0;
// 死区：±3° 内不响应
if (Math.abs(beta) </p><p>tableContainer.style.transform = <code>translateX(${scrollOffset}px)</code>;
}</p>
- 不用
requestAnimationFrame—— DeviceOrientation 事件本身频率足够，加 RAF 反而引入延迟 - 避免用
Math.round(scrollOffset)，小数像素对 transform 更平滑 - 监听前务必检查
if (window.DeviceOrientationEvent)，Safari 需用户手势触发权限
iOS 上 Permission denied？必须先触发用户手势
Safari 13+ 强制要求 DeviceOrientation 在用户手势（click/tap）后首次启用，否则 beta/gamma 恒为 0。
- 在页面加载后显示一个「启用倾斜控制」按钮，绑定
onclick，点击后调用window.addEventListener('deviceorientation', ...) - 首次监听后可移除按钮，后续 orientation 事件自动持续生效
- 不要依赖
DOMContentLoaded或load事件初始化监听——此时无用户激活上下文
表格本身无需特殊 markup，但建议给 <table> 设 <code>min-width 并让容器宽度小于内容宽度，否则 translateX 没效果。真正在意体验的细节，是死区大小和映射系数——这得靠真实手机反复试，而不是看文档猜。
