Use CSS to achieve cool horizontal scrolling effects

The cool horizontal screen scrolling effect CSS implementation

Demo:https://codepen.io/kobako/pen/bxvllm

We are not familiar with the scroll bar. Normally viewed pages, progress bars are usually vertically oriented, and content is arranged from top to bottom. But I do not know if you have seen some of the horizontal screen scrolling site, such a site in a number of vertical screen pages stand out, it is easy to reach the eye-catching effect.

Take the time Google a bit, found that the implementation method is really quite a lot, you can use inline-block plus no-wrap , you can also use the rotate entire page or div rotation (but I am really bitter hand, do not understand). read so much and try to summarize the simplest and most acceptable method.

First you need a div container, and a lot of pages you want to scroll across

<divclass="Container">  <divclass="Page"style="Background-color:red">Page1</div>  <divclass="Page"style="Background-color:green">Page2</div>  <divclass="Page"style="Background-color:blue">Page3</div>  <divclass="Page"style="Background-color:yellow">Page4</div></div>

I gave them a background color for each div, which was very handy in the layout.

Now I want to maximize each page to fit the entire screen, like this

So add CSS:

.page{  height:100vh;  width:100vw;}

VH and VW here appear to be HTML5 units, with numbers representing elements as percentages of the entire window.

You can see that each page is full of the screen and the scrollbar is vertical. Now I offer two ways to scroll them horizontally. The first idea is to use the inline-block that you might be familiar with, and the second is to use the Flex layout (the fault rate seems higher, I prefer)

Inline-block Way

The effect looks like this:

Css:

<STYLE>  body { margin:  0     .container  {   White-space:  nowrap   height:  100VH    overflow-y:  hidden     .page  { width:   span class= "DT" >100VW   height:  100VH    display:  inline-block     </STYLE>   

First, container plus white-space: nowrap , inline-block page style, so that the pages are not wrapped, but horizontally arranged

This will container the entire window and then apply the overflow-y attribute, so that the unsightly y-axis scroll bar is not visible, because the part outside the y-axis of the window is hidden

Flex mode

<style>Body{  margin: 0;}. Container {  Display:Flex;  Flex-wrap: nowrap;  Height: 100VH;  overflow-y: Hidden;}. Page {  Flex: 0 0 Auto;  Width: 100VW;  Height: 100VH; }</style>

Individuals prefer Flex mode. If you copy the above code to try it out, you will find that there is a problem with the inline block approach: there will be a fine trench in the middle of the next two page.

This ditch is not padding or margin caused, as the browser treats text, will automatically add a ditch between two words, let you see more comfortable, this is the default browser behavior. Of course, there are solutions, interested can see

.container{  ...  font-size:0;}.page{  ...  font-size:12px;}

Setting the parent container's font size to 0 will solve the problem with the ditch. But in this way, you need to set a font size for page, and all the H tags underneath are not working properly, you can manually set them a size

Use CSS to achieve cool horizontal scrolling effects