This is the basic function of the ‘overflow:auto’ property that is, a scroll bar will only appear IF there is some data that is overflowing. Note that the first image has a scroll bar, whereas the second image does not have one. It creates the same effect as overflow:scroll, but with overflow:auto, a scroll bar will only appear IF the data is overflowed otherwise, the scroll box will appear without any scroll bars.īoth the above images are using overflow property with ‘auto’ as its value. Above is an example of ‘overflow:scroll’. The result you can observe in the below picture.Īs we saw earlier, the ‘overflow’ property has few values that can be used. This results in the explicit appearance of a scroll bar. There is a ‘div’ element using ‘overflow:auto’ for creating scroll bars. While creating a scroll box, we use a CSS property known as ‘overflow’ and set it to ‘scroll’ to let the browser know that it is to add the horizontal and vertical scroll bars.īelow is a simple and basic example code for an HTML scroll box with overflow:scroll. Usually, a scroll box is obtained with the usage of the tag, and the customization for the bar is done using CSS properties. One of the applications of overflow property is with tags, which, when used, creates a scroll box.Ī scroll box in HTML is simply a box that is if and when in use has its own scroll bars. So if one puts his information or passage inside the scroll box, he does not need to worry about the scroll bars since they will be available at his disposal along with the scroll box. Overflow: scroll |auto|visible|hidden|initial|inherit įrom the above options, one can use any one of these values for the overflow property. The syntax is pretty simple for using this property. The ‘overflow’ property is supported by almost all web browsers as well. However, the ‘overflow’ property is used and is effective with content that is a block element with a specific height. This property helps you decide whether to show or not to show your overflowed content or mask it using scroll bars for convenient use of the content that is big for a specified visible area. The ‘overflow’ property helps you decide that you should provide your information or data, or content overflows from your element box, like some content enclosed in a tag, what needs to be done. What is the Purpose of ‘Overflow’ Property in Scrollbar in HTML? The ‘overflow’ property can be used in many ways, but we will elaborate on two of such ways in this article. One such CSS property is called the ‘overflow’ property that is applied to a tag. HTML has a way around anything you could think of, and if not, then with the help of CSS properties, HTML makes sure you get your desired results. In this article, we will try and create scroll bars or, should we say, interactive scroll bars using simple HTML. But nowadays, these scroll bars are made interactive that is, if and when the information becomes overflowing, a vertical or/and a horizontal scroll bar appears. Often there are default scroll bars present on your window whether the information the window contains is overflowing or not. And the area on which our bar slides is called a track. The bar, also sometimes called the handle, is used to drag the viewing area of a window. The above image is of our typical word document with its default vertical scroll bar. Web development, programming languages, Software testing & others Start Your Free Software Development Course
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |