前言：业务提了个奇葩需求，说 pc 上的表格要使用在 mobile 上，而且不能用别的组件，只能用表格。我就感觉会出大事情了，毕竟在 pc 上用的是 element-ui，对 pc 特别好用，对 mobile 则不那么友好的。但枪已经架在头上也只能硬着头皮做了。之后我就边做边调整，最终把功能和一些边缘问题都调整好了，也顺利得上线了。这个是做完那个项目后在空余时间写的一个 demo，下面我会一步一步得教你如何做横屏表格这个功能。
1、旋转屏幕
旋转屏幕最好的方式是旋转 <body>，用transform来做，如下所示：
body {
transform: translate(100vw, 0) rotate(90deg);
transform-origin: 0 0;
min-width: 100vh;
min-height: 100vw;
}
2、创建一个表格，用个wrapper把它包住
<main id="wrapper">
<table border="1" cellspacing="0" id="table"></table>
</main>
#wrapper {
background-color: #fff;
margin: 0 10px;
overflow: auto;
}
3、旋转body后加一个遮罩
<div class="mask" id="mask" style="display: none;"></div>
.mask {
position: fixed;
background-color: rgba(0, 0, 0, .5);
left: 0;
top: 0;
right: 0;
bottom: 0;
}
4、最最关键的一步来了！只出现在ios上
ios上的元素在rotate后，手指滑动的方向与overflow的方向不一致。也就是说，原生的滑动事件没有随元素的旋转而发生旋转，仍然保持原来左右滑就左右滚动的姿态，于是就会出现手指左右滑，但表格却上下移动的奇怪现象。android却没有这个问题。
于是只能重写touch事件：
if (isIOS) {
let prevX, prevY
document.getElementById('wrapper').onscroll = e => e.preventDefault()
document.getElementById('wrapper').ontouchstart = e => {
prevX = e.targetTouches[0].clientX, prevY = e.targetTouches[0].clientY
}
document.getElementById('wrapper').ontouchmove = e => {
if (document.body.classList.contains('rotate')) {
// 这个值用来减少滑动幅度 可调整
const trimming = 10
e.preventDefault()
let offsetX = e.targetTouches[0].clientX - prevX, offsetY = e.targetTouches[0].clientY - prevY
// 转向不同 算法不同
e.currentTarget.scrollTop += offsetX / trimming
e.currentTarget.scrollLeft -= offsetY / trimming
}
}
}
Android:
IOS:
5、最后发现有个问题，旋转的方向不对？！
第一次做的时候是往右边旋转的，然而用户在向上滑动表格时，有可能因为滑动位置偏下而导致页面退出，那样就gg了~ 因此更好的做法是调整旋转方向，往另一个方向旋转，这样就要修改下代码：
body {
/* transform: translate(100vw, 0) rotate(90deg); */
transform: translate(0, 100vh) rotate(-90deg); /* 调整为往左旋转 */
}
// 转向不同 算法不同
e.currentTarget.scrollTop -= offsetX / trimming
e.currentTarget.scrollLeft += offsetY / trimming
