CSS-only horizontal scroll tentative

The idea is to create an horizontal scroll layout and to allow the user to scroll up/down the mouse to scroll left/right.

So… please scroll down with your mouse.

The trick

Rotate -90deg the container, and 90deg its children blocks.

You have to fix container and children dimensions. 🙁

See CSS for rather correct positioning.

Desktop browsers

Vertical scroll… scrolls. 🙂

But horizontal scroll (e.g. with a trackpad) doesn’t. 🙁

Mobile browsers

Only horizontal touchmove works on Chrome. 🙂

Only vertical touchmove works on Safari and Firefox. 🙁

Conclusion

Without JavaScript: no good idea.