Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of overflow scrolling in HTML. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Principle

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

At this point, a scroll bar appears when the content displacement of the block-level scope exceeds the displacement of the outer block, and we can see the scrolling effect when the inner block scrolls. There are two ways to implement this: setting the parent element (external block for short) (top:0 and bottom:0) can fix the scrolling area, and there is another way to set the height height:xx of the parent element to complete the scrolling effect.

If the scroll bar you see is a scroll bar at the edge of the browser, then the scroll scroll event is not bound.

In the past, we used him to prevent the text content from being exposed, isolating the resources of the child element from the parent element. If you want to access the data content through a http port, you usually use this method to load the data. The user scrolls the mouse to the appropriate location to load the data synchronously. For example, the list list data of a page is obtained from the background, and the updated data is synchronized to the HTML through ajax. There is also the function of scrolling binding events, which is the function of visual crossover.

Scrolling event

Overflow scrolling includes overflow-x and overflow-y as well as overflow scrolling excess directly, but horizontal scrolling and vertical scrolling have different effects. We can handle different scrolling events according to the width width and height height of the scroll.

Three keys

Overflow scrolling event handling, in css to write three key factors, one is position:absolute, the second is overflow:scroll, the third is top: displacement, bottom: displacement (or height fixed), if we call other events on the component, using the effect of overflow scrolling, it will make the component more colorful.

End

If you forget to set overflow:scroll and height height or top and bottom, you may always take a detour at this place, so to avoid rolling binding events, we need to set overflow and displacement.

This is the end of this article on "sample analysis of overflow scrolling in HTML". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.