How To Add A Scrollbar

Table of contents:

How To Add A Scrollbar
How To Add A Scrollbar

Video: How To Add A Scrollbar

Video: How To Add A Scrollbar
Video: Creating a Custom Scrollbar for the Web - CSS Tutorial 2024, December
Anonim

Scroll bars are vertical and horizontal bars along the right (when writing from left to right) and bottom edges of a window or a separate area within a window, designed to move content vertically or horizontally. Web pages use Cascading Style Sheets (CSS) elements embedded in HTML to control their appearance and behavior.

How to add a scrollbar
How to add a scrollbar

Instructions

Step 1

Use the div tag if you want to make the scrollbar not for the entire page, but only for a limited area of it. In HTML (HyperText Markup Language), "tags" refer to individual commands for a browser to display a particular page element. In its simplest form, a div tag (often referred to as a "layer") is written like this:

This is the text inside the layer

Here is the opening tag, and is the closing tag. Everything that is placed between the opening and closing tags is in the layer as in a container and this container can be dimensioned - width and height. This is done using an additional parameter ("attribute") style, which should be added to the opening tag:

This is the text inside the layer

Step 2

Include in the style attribute of the div tag and the rules for the scrollbars of the layer too:

This is the text inside the layer

Here overflow: auto means that the scrollbars will appear automatically, that is, when the content of the layer will not fit into the specified dimensions. If auto is replaced with scroll, then these stripes will always be present, regardless of whether they are needed or not. A hidden value will have the opposite effect - the scroll will never appear, even if the contents of this container are not visible beyond its edges.

Step 3

Use a similar method to add scrollbars to the page as a whole. By default, they appear as needed, but if for any reason there is a need for their constant presence on the page, then the corresponding style rule should be added to the source html-code. Find the closing tag of the head of the document in the code of the page and write these style instructions in front of it:

body {overflow: scroll;}

Recommended: