Position Vertical Scrollbars on Opposite Side with CSS

Warning: I don't recommend this in general because this breaks the general perception of scrollbar position, which is very useful for many users, not to mention that it is a core accessibility for many people.

However, this is a fascinating CSS trick, the online world is huge and complex, and all kinds of situations may require some peculiar solutions.

Method 1: Direction skills

The trick here is to have the scrolling parent element use direction: rtl (or the opposite direction to your main direction), and then let the scrolling element internally switch back to your normal direction.

Method 2: Rotation skills

Modifying the text orientation for non-text orientation purposes always makes me feel a little uneasy, so this technique doesn't feel that it's so "hacker method". The trick is to rotate the parent element by 180 degrees, and then rotate the child element by 180 degrees to restore it to its upright state.

Due to the first rotation, the scroll bar ends up on the opposite side.

There are two particularly embarrassing reasons for this approach:

1. The scroll element scrolls to the bottom by default.
2. When scrolling with the roller, the scrolling direction feels reversed. The scroll bar itself should behave normally, but the trackpad or mouse wheel will feel the element's scrolling direction is reversed.

It's more like an April Fool's Day joke than a practical method. A viral tweet called it "cursed" and yes, it does.

The above is the detailed content of Position Vertical Scrollbars on Opposite Side with CSS. For more information, please follow other related articles on the PHP Chinese website!