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. 🙁


Without JavaScript: no good idea.

Wir sind ein Rohrtechnikunternehmen mit über 15 Jahren Erfahrung und einem Fokus auf Innovation.

Nicht verpassen, dranbleiben!

You have been successfully Subscribed! Ops! Something went wrong, please try again.