Horizontal scrolling is becoming fashionable. Let's figure it out. Horizontal scrolling in pure CSS

From the author: article by our guest, Peter Businessmans. Peter - front-end developer on the Audience site, where he enjoys writing styles in SCSS. Today he will show us what I call an honest CSS trick. The entire web is vertical. You read the site like a regular book: left to right, top to bottom. But sometimes you want to get away from verticality and do something crazy: make horizontal list. Or even crazier, a horizontal site!

It would be nice if we could do something like this:

/* fake code */ div ( scroll-direction: horizontal; )

Unfortunately, this will not happen. This is not even planned in CSS.

This is too bad because the company I work for would really use this. We do a lot of presentations, and presentation is a fairly horizontal thing. Typically, the aspect ratio of slides is 4:3 or 16:9. Because of this we have constant problem with horizontal slides and vertical web technologies. By “we” I mean me. But what I love is challenges.

Another use case

A specific method of application came to my mind. The idea is that it would be convenient for customers to view all products on one slide. Naturally, the product catalog would not fit in one form. Therefore, we decided to divide the catalog into three categories, each with horizontal scrolling. Thus, the three most popular products are visible in each category, and less important products are open easy access.

Method without JavaScript

We all know that there are many ways to do horizontal scrolling in JS. There are some examples on CSS-Tricks. I was wondering if this idea could be implemented on pure CSS. The solution turned out to be very simple:

create a container with elements;

rotate the container 90 degrees counterclockwise so that the bottom edge is on the right;

We rotate the elements inside the container back to their place.

Step 1) create a container

Create a div with many child elements.

In our example, the scrollable container will be 300px wide and will have 8 100x100px elements. The sizes are arbitrary, you can set any.

The height of the container will become the width and vice versa. Below, the "width" of the container will be 300px:

Horizontal-scroll-wrapper ( width: 100px; height: 300px; overflow-y: auto; overflow-x: hidden; )

And child elements:

Horizontal-scroll-wrapper > div ( width: 100px; height: 100px; )

Step 2) rotate the container

Now you need to rotate the container -90 degrees using CSS properties transform. We got horizontal scroll er.

Horizontal-scroll-wrapper ( ... transform: rotate(-90deg); transform-origin: right top; }

There's just one small problem: the child elements have rotated along with the container.

Step 3) return the child elements back to their place

So how do you return the elements to their place? Turn it back when CSS help transform properties

Horizontal-scroll-wrapper > div ( ... transform: rotate(90deg); transform-origin: right top; )

Step 4) Fixed Positioning

Everything looks good, but there are a couple of problems.

We rotated the container and set the upper right corner as the anchor, because of this left-hand side shifted to the width of the container. If it's hard for you to imagine, just put your finger on the right top corner page and turn it. Exit: you need to turn it back using the translate property.

Already better. But the first element is still not visible, since the same problem is observed with the child elements. This can be fixed by giving the first child element a top margin with the value of its width, or by transforming all elements like a container. The easiest way I've found is to add top padding to the container equal to the width of the child elements, thereby creating a buffer zone for the elements.

Compatibility

I checked compatibility on the devices available to me.

Desktop

Since scrollbar styling currently only works in Webkit/Blink browsers, a regular gray scrollbar is shown in Firefox and IE. This can be corrected using JS and hiding them altogether, but this is a topic for another lesson.

Scrolling with the mouse wheel works great on desktop. But my laptop has its own opinion on this matter. On devices with touch screens and touch pads, the demo behaves as if the div had not been rotated at all.

Mobile devices

I was pleasantly surprised to learn that Android recognizes that the container has been rotated and allows you to scroll by swiping left and right.

With iOS, on the contrary, everything is not so smooth. The browser behaves as if the container was not rotated at all. Therefore, to scroll you need to swipe up and down, which is quite strange. Overflow: hidden doesn't solve the problem.

Conclusion

According to the Can I Use website, transformations in CSS are now supported by 93%+ of users (at the time of writing, November 2016). There shouldn't be a problem here.

Although it is better not to use this method in production. I tested it on some devices, but not on all and not as thoroughly.

The most a big problem– touch inputs, in which to go left and right you need to swipe up and down. A solution could be to write a message on the site with an explanation, but then you would have to rely on users to read it. And even then it will be contrary to common sense. Another solution is to capture touch inputs using JS on devices, but then it’s better to write everything in JS and completely abandon our CSS hack.

In this article we will look at the issue of creating a block (div) of a fixed size with the ability to scroll horizontally and vertically. This can be implemented using CSS. Responsible for this overflow property.

About the useful overflow property

overflow-x- is responsible for displaying the contents of a block element horizontally.
overflow-y- is responsible for displaying the contents of a block element vertically.

CSS code

Prokrutka (
overflow: auto; /* property for horizontal scrolling. Automatically, if the content more block */
}

Overflow properties and values

Consider an example of a CSS class. In width and height we set the width and height of the block we need (the contents of the block will not go beyond them), and with the overflow property: auto; set horizontal scrolling if necessary

CSS code

Prokrutka (
width:150px; /* width of our block */
height:100px; /* height of our block */


overflow: auto; /* property for horizontal scrolling. Automatically, if there is more than a block */
}

Force scrolling in a CSS block

HTML and CSS code

Prokrutka (
height:150px; /* height of our block */
background: #fff; /* background color, white */
border: 1px solid #C1C1C1; /* size and color of block border */


}

Scrolling div example

In this article we will examine in detail the overflow property with all its values, which also allows you to add or remove a horizontal/vertical scrollbar. In other words, how to make scroll bars.

Overflow in CSS is responsible for how the display of information in a block will look if the content exceeds the height or width of this block. This property only applies to block elements(display : block ; or those that are initially block - div and so on).

Possible values ​​that this property takes (visible by default):

• Visible - The entire content of the element is displayed, even outside set height and width.
• Hidden - Only the area inside the element is displayed, the rest will be hidden.
• Scroll - Scroll bars are always added.
• Auto - Scroll bars are added only when necessary.
• Inherit - Inherits the value of the parent.

Most often, this property is used to remove or add scroll bars to an element. This is how, for example, they deal with frames so as not to push them into full size. Or to insert some large text, so that it does not take up half a page, but sits comfortably in a special block, and there it can be scrolled and read. For the most part, the property solves the problem of comfortable display of information.

In the demo you can see how each property value works in practice:

HTML code

body (margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (color:#CC0033;) div ( width:200px; /* fixed width */ height:300px; /* fixed height */ border:1px solid #555; padding:4px; float:left) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;).ScrollDiv (overflow:scroll;) .AutoDiv ( overflow:auto;)

It is worth paying attention to the fact that in this particular case the blocks have a given fixed height and width. This is important, for example, consider the option when the block height is set to auto :

We see that the text is displayed correctly inside the block in all cases, except for a small inconvenience in the case of scroll , where inactive scroll bars appear.

But in this case there is a small danger, having encountered which many do not understand why it arose and how to correct it. The point is that if there is a block with overflow: visible; that is, the default value, and its contents have elements with any float value except none , then all this will be displayed incorrectly. To understand what this situation is, consider an example:

Below the VisibleDiv block is another block

There is nothing under the VisibleDiv block

body (margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (color:#CC0033;) p (float:left;) div ( width:500px; height:auto; border: 1px solid #555; padding:4px; margin:4px; FFFFFF;font-weight:bold;)

In the first case, it is clear that the content with the float property moves outside the block and is not taken into account when determining the height of the block, in the second case, under the block with overflow: visible ; Another block is specially placed and painted a different color. Is not the only examples how such blocks can behave on the page (with overflow : visible ; and height : auto ; ). This can be corrected by replacing the visible value with hidden , it should be remembered that this property should only be specified for blocks with height: auto; , if there is a fixed height, then there is a high chance that the content will simply be hidden if it is larger than the specified height.

This is what the corrected version will look like:

Also, you will not have such a problem if the block has overflow: visible; and height: auto; some value is also specified float properties. In general, in many cases, the display of elements depends on a set of properties, rather than on individual properties.

You can use overflow-y: scroll for vertical scrolling.

• Translation

IN Lately The approach to website design using horizontal scrolling is becoming increasingly popular. We are very concerned about feasibility and usability this approach. To understand this issue, we have translated an article dedicated to horizontal scrolling. We invite you to read the material and discuss this topic in the comments...

Original publication title: “Claim against horizontal scrolling”…

From time to time everything is rethought. So it’s not surprising that sites with horizontal arrangement content are becoming fashionable. This is a bold and impressive design innovation, as the vast majority of websites on the Internet today use vertical scrolling.

The reason for the popularity of the approach vertical scrolling obvious - it is easier to implement, it is familiar and is used more often. Vertical scrolling sites are also considered more efficient. Since this is the opinion of the majority, the use of horizontal scrolling becomes even more deviant and bold.

Those who have chosen the “path” of horizontal scrolling reason from the position of their own choice. And the organizations that preferred this method, proclaim their websites to be works of art.

(http://www.guillaumejuvenet.com/)

Horizontal sites are a statement of one’s own uniqueness and unwillingness to fit into a social framework. As a result, a brand using this type of website design often develops a reputation for being "quirky" and "quippy."

Why do some people use horizontal scrolling?

Betting on mobile devices may not be such a good idea

The main reason for this has already been stated above. People don't know that you can view content by simply scrolling in some other way.

Because screens mobile phones or tablets and desktop screens are considered quite specific to each other, similarity does not apply here. You cannot use horizontal scrolling on desktop computer, simply because it is common on tablets and phones.

The underlying principle here is that people use these devices with different mindsets, and changing the accepted state of things can lead to some misunderstanding, leaving users out of their comfort zone.

The main drawback in implementing horizontal scrolling is that users prefer uniformity in web interfaces rather than unique mechanics for viewing content on a page.

Productive use of vertical space for the content area

Unlike popular vertical-oriented layouts, horizontal layouts have one advantage. They carefully provide only a small part information in the horizontal scroll area. And key information can be fixed in vertical space, drawing the attention of users to it not only by design, but also by positioning.

When should you use horizontal scrolling if you really want it?

Websites with horizontal content layout are most suitable for situations where it is necessary to display several objects at the same time: graphic images, small information blocks, groups of icons or previews that link to more detailed description.

Mobile versions“desktop” sites, or websites designed to be viewed from mobile devices- this is the area of ​​application where horizontal scrolling is completely appropriate. However, it also works well for a number of other sites, allowing them to display a large number of information in a simple and profitable way.

Usability problem

Although many users today are familiar and even accustomed to horizontal scrolling (when the entire content of the page changes), horizontal scrolling (with smooth loading of content) is still condemned by many. She keeps getting negative reviews from many users and should therefore be used with caution. It is usually used to show individuality, for example, to declare trademark. But even with this use, many people are unfamiliar with it.

Users ignore horizontally scrolling website blocks

People tend to not notice even obvious cues regarding horizontally scrolling website navigation, often leaving large arrows and other elements horizontal navigation unnoticed and untouched.

(http://www.lorenzobocchi.com/)

This is mainly because this form of use does not conform to the expected pattern of functioning and, as a result, is not acceptable or meaningful.

Often, sites with full page turns (similar to paper books and magazines) create high expectations among users, but subsequently, people often find themselves disappointed with the content provided. Thus, a good solution for one (those paper books and magazines) may be a disservice for another.

Which is correct?

What to do if you still want to implement horizontal scrolling on your website and not lose users? It's really simple - add additional features navigation.

Add a menu to the horizontal scrolling mechanics that will allow you not only to move from one section to the next, but also to skip some sections completely. It will bring flexibility and encouragement large quantity users to browse sections that interest them.

A horizontal scroll bar is also a must to show how much content is left unwatched. Sometimes this motivates people to read a little more when they are about to leave the site.

What to consider

Although attitudes towards the use of horizontal scrolling are slowly changing with the advent of new technologies such as touch screens, tablets, all-in-one PCs with a touchscreen, etc., this method still does not dominate.

On analog keyboards, it is easier to manipulate the up/down keys than the right/left keys. But on the touchpad, adding new gestures will be more convenient when implementing horizontal scrolling.

Scrolling speed should also be optimized. Scrolling too fast can cause headaches, and scrolling too slow can be very annoying.

Despite the fact that we are used to reading from left to right, slowly scrolling down the page, this habit is now changing. With the advent e-books And various applications for smartphones, tablets and touchpads, people are gradually getting used to flipping when reading. However, it is always important to take into account what users may encounter when introducing new concepts into everyday life.