先上代码:JSFiddle。
这次的话题的希望是能够在 无脚本环境 下实现完美横向滚动。追求无脚本对提高站点的可访问性有极大帮助,例如,站点位于不受信任列表中的时候仍然可以访问大多数功能。
单纯设置 overflow-x: scroll; overflow-y: hidden;
似乎不够。
于是主要就是解决上下滚动的问题,如果有 JavaScript 这是很简单的。如果要避开 JavaScript ,一个思路是对内容做两次反射,但是滚动条只做一次反射,也就是最开始的代码,这可以实现在 Edge 14 上每个访问方式都是正常的,但是问题是在 iOS Safari 上会导致触控访问不正常——上下移动手指会导致内容左右滚动。
于是看起来山重水复疑无路了,我又听说使用 Shift+滚轮 似乎就可以改变滚动方向,求证实或证否!