Interesting horizontal overflow scrolling

I recently received a very interesting request, whether it is possible to use the mouse wheel to scroll the content when the content overflows horizontally .

What does that mean? Let's take a look at such a situation:

We have a container that overflows scrolling vertically, and a container that overflows scrolling horizontally:

If you use a non-trackpad (most users do not have a trackpad), but use a mouse to operate, you will find that among the two containers, only the container that overflows and scrolls in the vertical direction can respond to the mouse wheel:

1. Vertical overflow scrolling container, normal response to mouse wheel, scrollable content
2. Horizontal overflow scrolling container, does not respond to mouse wheel, non-scrollable content

So, here may be a user pain point.

If in some specific scenarios, there is indeed horizontal scrolling content, such as horizontal image content display, etc. I want to use the mouse wheel to scroll the content, can I do it?

That is a must. This article will introduce a possible technique. In certain scenarios, the container that overflows and scrolls in the horizontal direction can still be scrolled with the mouse wheel.

Rotation Dafa

Yes, since only vertical overflow can respond to scroll wheel operations. So let's start from this angle.

First implement a vertical overflow:

 <div class="g-scroll">
    <div class="g-pesudo"></div>
</div>

 .g-scroll {
    width: 200px;
    height: 200px;
    border: 1px solid #f00;
}
.g-pesudo {
    width: 200px;
    height: 400px;
    background: linear-gradient(rgba(122, 122, 50, .3), rgba(20, 200, 150, .3))
}

Probably something like this:

Well, adding overflow: hidden , it becomes like this:

 .g-scroll {
    overflow: scroll;
}

Since only the overflow in the vertical direction can respond to the scroll wheel operation . To become horizontal, we just need to rotate the container 90°, right?

It seems to make sense, let's try it:

 .g-scroll {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    transform: rotate(-90deg);
    overflow: scroll;
}

Take a look at the effect:

In this way, the original vertical container has become a horizontal container. In the figure, the movement of the container without the mouse on the scroll bar is realized by the scroll wheel.

Of course, this has a very serious problem. If there is content in the container, it becomes like this:

Oh, since the container is rotated 90° as a whole, of course the contents inside are also rotated. We need to solve this problem.

The content is rotated 90° in reverse to fix the viewing angle

This is easy to solve, we just need to rebuild the DOM and rotate the original content by 90° in the opposite direction.

Of course, the center of rotation needs to be taken care of at the same time.

The whole structure becomes like this:

 <div class="g-scroll">
    <div class="g-pesudo"></div>
    <div class="g-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quis ipsum officiis placeat ipsa sit ad incidunt similique, consequuntur earum architecto recusandae veritatis et illo, illum quae nulla minus rerum?
    </div>
</div>

We extract the DOM that actually contains the text content into a separate DOM, at the same level as g-pesudo .

What we actually trigger the scroll operation is the change of g-pesudo , we only need to rotate the content again and superimpose it on the original container perfectly:

 .g-scroll {
    position: relative;
    width: 200px;
    height: 200px;
    transform-origin: 100% 0;
    transform: rotate(-90deg);
    overflow: scroll;
}
.g-pesudo {
    width: 200px;
    height: 400px;
    background: linear-gradient(rgba(122, 122, 50, .3), rgba(20, 200, 150, .3));
}
.g-content {
    position: absolute;
    top: 0;
    left: 200px;
    width: 400px;
    height: 200px;
    transform-origin: 0 0;
    border: 1px solid #000;
    transform: rotate(90deg);
}

What does that mean. Through positioning, we set the height and width of g-content to the height and width that the DOM of the scrolling content actually represents after the container is rotated.

And, by setting the lower left corner as the rotation center transform-origin: 0 0 , after another rotation, the scroll container is superimposed with the content:

Well, after this series of more complicated operations, we have realized the content-adaptive rotation, adding overflow: scroll to the container, everything behaves normally, we have achieved horizontal scroll overflow, and the mouse wheel still works!

The complete code, you can poke: CodePen Demo -- CSS-Only Horizontal Parallax Gallery

hide scrollbar

Of course, there is a problem, so that the scroll bar wears out.

Here, in modern browsers, we can hide the entire scrollbar with the ::-webkit-scrollbar relevant CSS:

 /* hide scrollbar */
::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}

In this way, the entire effect will not feel the existence of the scroll bar, and you can directly use the scroll wheel to control it:

The above operations are all done under the mouse wheel.

Other usage scenarios

This technique is only applicable in certain scenarios.

If the internal DOM is a little more complicated, the cost of the overall transformation will be very high, which is not suitable.

Here is another demo implemented with this technique, a horizontal 3D pure CSS parallax effect, using the mouse wheel to control the horizontal scrolling of the page:

If you are interested, you can study the source code by yourself. The overall technique is similar to that described above. The container is rotated once, and the content is rotated in the reverse direction twice.

CodePen Demo -- CSS-Only Horizontal Parallax Gallery By Paulina Hetman

at last

Well, this is the end of this article, I hope it helps you :)

More wonderful CSS effects can follow my CSS inspiration

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.