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

This article mainly introduces "how to use webkit-overflow-scolling in CSS3". In daily operation, I believe many people have doubts about how to use webkit-overflow-scolling in CSS3. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use webkit-overflow-scolling in CSS3". Next, please follow the editor to study!

We all know that in ios's safari browser and app kernel browser, when the content of an H6 page exceeds the height of the screen, when we swipe the screen with our fingers, scrolling ends as soon as the gesture leaves the screen. At this point, we can set-webkit-overflow-scrolling=touch to make the page scroll smoothly, but setting this will also lead to a lot of problems.

1. Setting body alone-webkit-overflow-scrollingtouch is invalid. You need to set both html and body to have an effect. The code is as follows:

Html,body {

Height:100%

Overflow:auto

-webkit-overflow-scrolling:touch

}

2. After the parent container is set to-webkit-overflow-scrolling=touch, child containers are not allowed to have child elements fixed by fixed. Why do you say so? Because when you set-webkit-overflow-scrolling=touch, when you swipe the screen, you will find that the fixed property is invalid, it also scrolls with the screen, and this element will be fixed to the page only when scrolling stops. Obviously, this is not what we want.

My solution here is not to set-webkit-overflow-scrolling on the body element, but to add an additional div container to set it where you need to scroll, and then put all the containers that need fixed directly in the body element.

3. Setting the-webkit-overflow-scrolling attribute to div alone is not valid. After testing, I found that I need to set the parent container div1 to a container with a height, and then set the-webkit-overflow-scrolling attribute to excess child containers as follows:

.div-p {width:100%;height:500px;/* this is the test value, which is specifically set for the project requirements. Do not exceed the content height of the child container * / overflow:hidden;/*. Setting this value has no effect on-webkit-overflow-scrolling * /}

.div-c {width:100%;height:2000px;overflow:auto;/* test found that this value must be set to work * /-webkit-overflow-scrolling:touch;}

I want to scroll. I want to be smooth in ios.

After repeated tests, it is found that the following setting can also effectively trigger the-webkit-overflow-scrolling attribute. The specific code is as follows:

. content-box {

After testing, height:500px;/* found that as long as the set height is less than the screen height, the-webkit-overflow-scrolling attribute can also effectively trigger * /

Border:solid1pxgreen

Overflow:auto

-webkit-overflow-scrolling:touch;}

Oh, I'm going to roll.

It works.

Of course, the above version has to change its height at the end of the html rendering to be highly consistent with the screen, but the maintainability of this method is too poor, and later found a solution, the specific code is as follows:

.iOS-scroll-father {

Position:absolute

Top:0

Bottom:0

Left:0

Width:10rem

Height:100%;}

.iOS-scroll-child {

Position:absolute

Top:0

Bottom:0

Left:0

Width:10rem

Overflow:auto;}

-webkit-overflow-scrollingtouch

I want to solve the problem of smooth sliding of ios perfectly. Let's give it a try. Demo, please add your own code to exceed the content of the screen.

Here, as a reminder, set the-webkit-overflow-scrolling property while either do not set height, or the height of height+padding does not exceed the height of the screen, otherwise you will find that you will be cut off when you scroll to the top or bottom, requiring you to slide to appear. This is a pit, ah, I accidentally set the height 100% and padding found this phenomenon, and then look around can not find the problem, can only delete the code slowly troubleshooting.

4, of course, if only these problems, it is really easy to solve, however, one day wrote a list, need to do scrolling paging special effects, then I went to listen to the scrolling event of the scrolling bar, found that scrollTop will not be updated from time to time, to wait until the page stops scrolling to get the scrolltop value.

At this point, the study on "how to use webkit-overflow-scolling in CSS3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.