Share your experience using webkit-overflow-scolling in CSS3-CSS Tutorial-php.cn

Share your experience using webkit-overflow-scolling in CSS3

yulia

Release： 2018-09-19 16:16:53

Original

1899 people have browsed it

Scroll bars are often used in page layout. This article will share with you my experience of using -webkit-overflow-scolling to avoid pitfalls. If you need it, you can come here. have a look.

We all know that in the safari browser and app kernel browser of ios, when the content of an h5 page exceeds the height of the screen and our fingers slide the screen, as soon as the gesture leaves the screen, the scroll will immediately Finish. At this time, we can set -webkit-overflow-scrolling=touch to make the page scroll smoothly, but setting this will also cause many problems.

1. Setting -webkit-overflow-scrolling touch on the body alone is invalid. It needs to be set on both html and body at the same time to be effective. The code is as follows:

html,body{
    height: 100%;
    overflow: auto;
   -webkit-overflow-scrolling: touch;
}

Copy after login

2. Parent container setting- After webkit-overflow-scrolling=touch, fixed child elements are not allowed to appear in the subcontainer. Why do you say this? Because when you set -webkit-overflow-scrolling=touch, you will find that the fixed attribute is invalid when you slide the screen, and it also scrolls with the screen. This element will only be fixed to the page when the scrolling stops. Obviously this is not the result we want.

My solution here is not to set -webkit-overflow-scrolling on the body element, add another div container to set it where scrolling is needed, and then put all the containers that need to be fixed directly on the body within the element.

3. Setting the -webkit-overflow-scrolling attribute on a div alone is invalid. After testing, I found that I need to first set the parent container div1 to a container with a height, and then set the exceeded child container. The specific code for setting the -webkit-overflow-scrolling attribute is as follows:

<style>.div-p{ width: 100%; height: 500px;/*这是测试值，具体针对项目需求设置，不要超出子容器内容高度*/overflow: hidden;/*设不设定这个值对-webkit-overflow-scrolling没有影响*/}
.div-c{ width: 100%; height: 2000px; overflow: auto;/*测试发现一定要设定这个值才起作用*/ -webkit-overflow-scrolling: touch;}</style>
<div class="div-p">
<div class="div-c">我要滚动啊，，在ios要顺畅啊</div>
</div>

Copy after login

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

<style>
.content-box{
  height: 500px;/*经过测试后发现只要设定的这个高度小于屏幕高度，-webkit-overflow-scrolling属性也能有效触发*/
  border: solid 1px green;
  overflow: auto;
  -webkit-overflow-scrolling: touch;}
</style>
<body>
<div class="content-box">哎呀我是要滚动的啊<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
有效果的哦。。。
</div>
</body>

Copy after login

Of course , the above version has to change its height at the end of HTML rendering to achieve the same height as the screen. However, the maintainability of this method is too poor. Later, a solution was found. The specific code is as follows:

<style>
.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-scrolling touch
</style>
<div class="ios-scroll-father">
<div class="ios-scroll-child">
我要完美解决ios的顺畅滑动问题啊，，，来试试咯。演示，请自己添加代码到超出屏幕内容哦~
</div>
</div>

Copy after login

Here, a reminder, when setting the -webkit-overflow-scrolling attribute, either do not set the height, or the height of the height padding should not exceed the height of the screen, otherwise you will find that when you scroll to the top or bottom Sometimes a part of it will be cut off, and you need to swipe to appear. . . This is a pitfall. I accidentally set the height and padding to 100% and discovered this phenomenon. Then I couldn't find the problem after searching around, so I could only delete the code and slowly troubleshoot it.

4. Of course, if it were just these problems, it would be really easy to solve. However, one day I wrote a list and needed scrolling paging effects. At this time, I listened to the scrolling event of the scroll bar. It is found that scrollTop is not updated from time to time, and the scrollTop value cannot be obtained until the page stops scrolling.

5. The transition animation will not be executed during page scrolling. It’s a huge pitfall. If you have a solution, please leave a message and let me know. Thank you very much. . .

The above are encountered during the development of the project and are the conclusions obtained through repeated testing based on the found information. If there is anything wrong, please point it out.

The above is the detailed content of Share your experience using webkit-overflow-scolling in CSS3. For more information, please follow other related articles on the PHP Chinese website!