There is a problem today. Because I have met before, solved, but suddenly can't remember how to solve
So, just record this today.
The problem is this:
A container under the body section height is 100% width of 100%
That is, the parent class is the same width as the screen. But the height of the sub-label under the section exceeds the parent tag
At this point scrolling on the phone side is likely to roll the card. This is actually because the device is not enabled for elastic scrolling, or it does not support elastic scrolling.
Test it.
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, User-scalable=no">6 <title>Rolling test</title>7 <style>8 * {9 margin:0;Ten } One A Html,body{ - Height:100%; - } the - Section{ - width:100%; - Height:100%; + Overflow:Auto; - -webkit-overflow-scrolling:Touch; + } A at Section . App ul{ - List-style:None; - padding:0; - } - - Section . App Li{ in Height:300px; - } to + Section . App Li:nth-child (odd){ - background:#98d; the } * Section . App Li:nth-child (even){ $ background:#4d8;Panax Notoginseng } - </style> the </Head> + <Body> A < Section> the <Divclass= "App"> + <ul> - <Li>1</Li> $ <Li>2</Li> $ <Li>3</Li> - <Li>4</Li> - <Li>5</Li> the <Li>6</Li> - <Li>7</Li>Wuyi <Li>8</Li> the <Li>9</Li> - <Li>10</Li> Wu </ul> - </Div> About </ Section> $ </Body> - </HTML>
Test it with your phone:
The solution is to add a
-webkit-overflow-scrolling:touch;
property, you can resolve the problem. However, for this property, Developer.mozilla.org gives the following description:
Https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
He points out that this attribute is not canonical and not all WebKit kernel browsers support this property and may change in the future.
But, no way, can only be solved first. It is believed that this attribute will be regulated in the future.
Add the page after this property
WebKit Kernel Browser mobile phone side scrolling card processing method modification
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
