Sometimes it is necessary to place a large piece of text in a small window that does not completely fit there, to solve this problem it is easy to create a scrolling layer - scrolling div.

It will take

Fixed size layer and CSS style.

CSS

The .scroll CSS class sets parameters 600px long and 300px high, padding, border, and background color. BUT! Most importantly, the overflow: auto parameter sets the scrollbar to appear when the amount of text is larger than the layer size.

Scroll (width: 500px; height: 300px; / * fixed size required * / overflow: auto; / * scrolling appears as needed * / padding: 10px 20px; border: # 999 1px solid; background-color: #FAFAFA;)

Html

Result

On the screen you will see a small frame with text and a border gray.

The most widespread are ethylene glycol coolants based on ethylene glycol and water (distilled) with a complex of additives.

Antifreezes are obtained as aqueous solutions of the corresponding concentrates. During operation, the quality of antifreeze can be controlled by density. During operation, water first evaporates from the coolant, which should be periodically refilled (distilled). It is necessary to ensure that no gasoline and oils get into the antifreeze, as they cause foaming and the release of fluid from the system.

The service life of coolants such as "Tosol" and "Lena" is limited by the service life of the additives and is usually 2 years; the average mileage for various cars is 50,000 km.

When servicing a used vehicle for the first time, the coolant must be replaced. After draining the old fluid, fill the system with clean water, start the engine and let it idle for 15-20 minutes; then drain the water and refill the system with new coolant.

3. Forcing vertical and horizontal scrolling in the CSS block
4. An example of a scrolling div block

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

About the useful property overflow

Property overflow is responsible for displaying the content of a block element. It can be used when the content does not fit completely and goes beyond the block area.

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

CSS code

Prokrutka (
overflow: auto; / * property to scroll horizontally. Automaton if the content is larger than the block * /
}

Overflow properties and values

visible- displays the entire content of the element, even beyond the specified width.
hidden- only the area inside the element is displayed, the rest is hidden.
scroll- forcibly added a horizontal (y) or horizontal (x) scrollbar.
auto- automatically added horizontal stripe scrolling if the block is smaller.

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

CSS code

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


overflow: auto; / * property to scroll horizontally. Automaton if there is more block * /
}

Force scrolling in a CSS block

You can also force scrolling in height and width. To do this, each axis: overflow-y: scroll; (vertical) overflow-x: scroll; (horizontal) we specify the scroll parameter, forced scrolling.

HTML and CSS code

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


}

Scrolling div block example

HTML and CSS code

One of the properties overflow can be removed, then there will be scrolling only along one axis, which is quite enough.
View script work For example below.

From the author: article by our guest, Peter Bizmans. Peter is a 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: from left to right, top to bottom. But sometimes you want to get away from verticality and do something crazy: do horizontal list... Or even crazier, a horizontal site!

It would be nice if we could do like this:

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

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

Unfortunately, this will not happen. This is not even in the plans for CSS.

This is very bad, because in the company I work for it would be very useful. We do a lot of presentations, and a presentation is a pretty horizontal thing. Usually the aspect ratio of slides is 4: 3 or 16: 9. Because of this, we have persistent problem with horizontal slides and vertical web technologies. By "we" I mean myself. But what I love is the difficulty.

Another use case

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

The way without JavaScript

We all know that there are many ways to do horizontal scrolling in JavaScript. There are some examples at CSS-Tricks. I wondered if it was possible to translate this idea into 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;

rotate the elements inside the container back into place.

Step 1) create the container

Create div block with many child elements.

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

< div class = "horizontal-scroll-wrapper squares"> < div >item 1< / div > < div >item 2< / div > < div >item 3< / div > < div >item 4< / div > < div >item 5< / div > < div >item 6< / div > < div >item 7< / div > < div >item 8< / div > < / div >

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;)

width: 100px; height: 300px; overflow - y: auto; overflow - x: hidden;

And the children:

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

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

Step 2) rotate the container

Now you need to rotate the container by -90 degrees at CSS help transform properties... We got a horizontal scroller.

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

Horizontal - scroll - wrapper ( . . . transform: rotate (- 90deg);

There is just one small problem: the children rotated with the container.

Step 3) put the children back in place

So how do you get the items back into place? Rotate it back using the transform CSS property.

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

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

Step 4) fixed positioning

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

We rotated the container, and set the upper right corner as an anchor, because of this left-hand side shifted by the width of the container. If you find it difficult to imagine, just place your finger on the right top corner page and rotate it. Exit: you need to rotate it back using the translate property.

Better now. But the first element is still not visible as the same problem is observed with children. This can be corrected by giving the first child a top margin with 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 children, thereby creating a buffer for the elements.

Compatibility

I have checked the compatibility on the devices available to me.

Desktop

Since the styling of scrollbars so far only works in Webkit / Blink browsers, a regular gray scrollbar is shown in Firefox and IE. This can be fixed with JS and hidden altogether, but that's a topic for another tutorial.

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 was not rotated at all.

Mobile devices

I was pleasantly surprised to learn that Android understands that the container has been rotated and allows you to scroll with swipes to the right and left.

On the contrary, with iOS, things are not so smooth. The browser behaves as if the container was not rotated at all. Therefore, you need to use up and down swipes to scroll, which is rather 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 this writing, November 2016). This shouldn't be a problem.

It's better not to use this method productively, though. I tested it on some devices, but not all and not as thoroughly.

The most a big problem- sensory inputs, in which you need to swipe up and down to go left and right. The solution could be to write a message on the site with an explanation, but then you have to rely on the fact that users will read it. And even then it would be contrary to common sense. Another solution is to grab sensory 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 analyze in detail the overflow property with all its values, which also allows you to add or remove a horizontal / vertical scroll bar. In other words, how to make scrollbars.

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 - Displays the entire content of the element, even beyond the specified 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 needed.
• Inherit - Inherits the value from the parent.

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

In the demo, you can observe how each of the property values ​​actually works:

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; margin: 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, blocks with a given fixed height and width. This is important, for example, consider the option when the block height is set to auto:

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

But in this case there is a small danger, faced with which many do not understand why it has arisen and how to fix it. The point is that if a block with overflow: visible; that is, the default value, and its content has elements with any float value, except for none, then all this will be displayed incorrectly. In order to understand what this situation is, consider an example:

There is another block under the VisibleDiv 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;) .VisibleDiv (overflow: visible; background: rgba (0,255,0,0.1);) .ignor (background: rgba (0,255,0,0.6); color: # FFFFFF; font-weight: bold;)

In the first case, you can see that the content with the float property leaves the block and is not taken into account by it when determining the block height, in the second case, under the block with overflow: visible; another block is specially placed and shaded in a different color. These are not the only examples of how such blocks can behave on the page (with overflow: visible; and height: auto;). This can be fixed by replacing the visible value with hidden, it should be remembered that this property should be specified only for blocks with height: auto; if there is a fixed height, then there is a great chance that the content will simply be hidden if it is greater than the specified height.

This is what the revised version would look like:

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

Instructions

Use a div tag if you want a scrollbar not for the entire page, but only for a limited area of ​​it. V HTML language(HyperText Markup Language - "Hypertext Markup Language") "Tags" refer to individual commands for the browser to display a particular element of the page. In the very simple form a div tag (often referred to as a "layer") like so:

Here - closing. Everything that is placed between the opening and closing tags is in the layer as in the container and this container can be dimensioned - width and height. This is done with additional parameter("Attribute") style that follows the opening tag: