更改滚动方向中页，然后返回

Question

I came across this page and I was really impressed on how the scroll direction changed mid page to horizontal and then reverted back to vertical.

I don't have the slightest idea how that is done. Can someone fill me in?

Answer 1

If you look at your scroll bar, the direction isn't actually being changed. During the horizontal portion, the "scrolling" area gets position: fixed and fills the screen, then it is shifted towards the left as you continue scrolling down. This gives the illusion of horizontal scrolling when there is none.

Here's an example, though without the transition between vertical and horizontal scrolling.

 document.onscroll = () => { // adjust for the difference between window height and width let percentScrolled = window.pageYOffset / window.innerHeight; let toScroll = percentScrolled * window.innerWidth; // scroll horizontally document.getElementById("scroll").style.left = "-" + toScroll + "px"; }

 body { width: 100vw; height: 500vh; overflow-x: hidden; } div { width: 500vw; position: fixed; }

 <div id = "scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac leo nulla. Donec volutpat consequat elit ut tincidunt. Proin id purus sed nulla lacinia eleifend sed porttitor neque. Vestibulum volutpat porta ex. Aenean accumsan metus eu euismod semper. Phasellus viverra tortor eget enim ultrices, quis dignissim lectus posuere. Nullam turpis nisl, fringilla gravida interdum nec, semper et tellus. Etiam vitae rutrum ligula. Nulla lobortis massa odio, id tempor leo dictum sit amet. Nulla ut porta orci. Maecenas pulvinar est ac est accumsan, non consequat augue lobortis. Morbi semper sollicitudin eros, sit amet lacinia nulla varius a. Nam dignissim faucibus risus, eleifend tincidunt dolor scelerisque a. Quisque tempus, quam efficitur feugiat laoreet, sapien eros aliquam erat, auctor feugiat lacus ipsum id nisl. In nisi urna, laoreet eget pulvinar dignissim, maximus laoreet augue. Vivamus euismod mauris nec felis posuere, eu maximus ante volutpat. Integer porttitor urna quis vehicula feugiat. Integer justo nibh, rutrum pulvinar massa quis, molestie pretium ipsum.</div>