What is the importance of overflow scrolling?

This time I will bring you the importance of overflow's scrolling, and the notes on the importance of overflow's scrolling. The following is a practical case, let's take a look.

Principle

To set a block-level scope overflow effect, you only need to set overflow:scroll and height:xx at the location of the external block.

At this time, when the content displacement of the block-level scope exceeds the displacement of the outer block, a scroll bar will appear. When the inner block scrolls, we can see the scrolling effect. There are two implementation methods here. Setting (top:0 and bottom:0) on the parent element (referred to as external block) can fix the scrolling area. There is also another way of setting the height of the parent element: xx to complete the scrolling effect.

If the scroll bar you see is a scroll bar on the edge of the browser, it means that the scroll scroll event is not bound.

In the past, we used it to prevent the text content from being exposed and to isolate the resources of the child elements and the parent element. If you want to access the included data content through an http port, you will generally need to load the data. Using this method, the data will be loaded synchronously only when the user scrolls the mouse to the corresponding position. For example, the list data of a page is obtained from the background, and the data is updated through ajax and synchronized to HTML. There is also the role of scroll binding events, which is the function of visual cross.

Scroll event

overflow scrolling includes overflow-x and overflow-y and overflow directly scrolls the excess part, but horizontal scrolling and vertical scrolling The effect is different. We can do different scrolling Event processing according to the scrolling width and height.

Three Keys

For overflow scrolling event processing, three key factors must be written on the css, one is position:absolute, the second is overflow:scroll, and the third is For top: displacement, bottom: displacement (or height fixed), if we use the overflow scrolling effect when calling other events on the component, the component will become more colorful.

End

If you forget to set overflow:scroll and height or top and bottom, you may always take a detour here, so in order to avoid scroll binding events, we need Set overflow and displacement.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

html+css+jquery to make tabs

html jumps after the click event of hyperlink a Redirect the address pointed to by href

It is invalid to define multiple class attributes in HTML

The above is the detailed content of What is the importance of overflow scrolling?. For more information, please follow other related articles on the PHP Chinese website!