An HTML Scroll Tutorial
As you design your HyperText Markup Language (HTML) Web pages, use scroll boxes with vertical and/or horizontal slider features to make your design user friendly. Visitors use these scroll features to view all the content without being inconvenienced with large blocks of text that do not fit in the browser window. Create your own scroll boxes by using Cascading Style Sheets (CSS) in conjunction with your HTML code.
Other People Are Reading
Instructions
-
-
1
Launch your text editor and create a new page.
-
2
Enter opening and closing "<div></div>" tags. Type the desired content between these elements to allow it to appear in the scroll box. For example:
<div>
This is the content that appears in the scroll box.
</div> -
-
3
Place your cursor in the opening "<div>" tag. Use an inline CSS "style=" attribute to set the preferred height and width of your scroll box in pixels (px). Type the dimensions as follows:
<div style="height:150px; width: 200px;"> -
4
Assign the "overflow" descriptor to "scroll" in the "<div>" tag. This command instructs the browser to display scroll bars when your content completely fills the text box. To illustrate:
<div style="height:150px; width:200px; overflow: scroll;"> -
5
Type "overflow-x" (horizontal) and overflow-y" (vertical) descriptors to create a scroll box that only scrolls horizontally or vertically (if preferred). Assign a "hidden" value to suppress the scroll behavior and a "scroll" value to the enable the scroll bar. For instance, make the scroll bar appear on just the horizontal axis:
<div style="height: 150px; width:200px; overflow-x: scroll; overflow-y: hidden;>Note that the "overflow: scroll" entry from Step 4 is replaced with the new "overflow-x" and "overflow-y" descriptors.
-
6
Save your file with the "HTML" extension (ending).
-
1
