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