Scroll bars appear in cells or layers

Cell

How scroll bars appear in cells or layers

Solution Idea:

This is done primarily by setting the CSS properties of the elements overflow (including overflow-x and overflow-y).

Specific steps:

1. Automatically appear horizontal scroll bar:

<div style= "Width:200;height:200;overflow-x:auto" >
<script>
Make an element appear in a horizontal scroll bar
document.write (The new Array.) Join ("! "))
To make an element appear in a vertical scroll bar
document.write (The new Array.) Join ("! <br> "))
</script>
</div>

2. Vertical scroll bar appears automatically:

<div style= "Width:200;height:200;overflow-y:auto" >
<script>
Make an element appear in a horizontal scroll bar
document.write (The new Array.) Join ("! "))
To make an element appear in a vertical scroll bar
document.write (The new Array.) Join ("! <br> "))
</script>
</div>

3. Vertical and horizontal scroll bars appear automatically:

<div style= "Width:200;height:200;overflow:auto" >
<script>
Make an element appear in a horizontal scroll bar
document.write (The new Array.) Join ("! "))
To make an element appear in a vertical scroll bar
document.write (The new Array.) Join ("! <br> "))
</script>
</div>

Note: To make the element scroll horizontally, you must define the width of the element, and to make the element scroll vertically, you first define the height of the element.

Special Tips

The 3rd step of the code run as shown in Figure 1.7.1, you can see from the diagram, the div element width and height limit to 200x200, out of range of content will automatically cut off, and add scroll bar.

Figure 1.7.1 Force the element to appear scroll bars

Special Notes

This example is mainly the application of CSS attribute overflow. The overflow property includes Overflow-x and Overflow-y, and if you want the setting to take effect only for the X or y axes, you must use Overflow-x or overflow-y, and the x and Y axes will be in effect when you set up overflow. The optional parameter values for the overflow attribute are described:

Visible does not cut content nor does it add scroll bars. If you explicitly declare this default value, the object will be clipped to the size of the window or frame that contains the object. and the Clip property setting will fail.

Auto This is the default value for the body object and textarea. Cut the content and add scroll bars when needed.

Hidden does not display content that exceeds the size of the object.

Scroll always displays scroll bars.