Mobile end business development, IOS often have fixed elements and input boxes ( input elements) in the same situation. But fixed there are a number of inexplicable problems with the element being evoked by a soft keyboard. This article provides a simple layout scheme with input boxes fixed .
Fixed + Input bug phenomenon under iOS
Let us first give a chestnut, the most intuitive explanation of the phenomenon of this BUG. General fixed Layout, you may use the following layout (only schematic code)
<body> <!--fixed-positioned head-->
And then it looks just like the following. When you drag the page header and footer already positioned in the corresponding position, the visual is no problem.
But then the question came! If the soft keyboard of the bottom input box is aroused, slide the page again, and you will see the following image:
We see fixed that the positioned elements follow the page to scroll ... fixed the property is invalid!
What is this for? Simple explanation: * * Soft keyboard recall, the elements of the page fixed will be invalidated (that is, can not float, but also be understood to become a absolute positioning), so when the page more than one screen and scrolling, the invalid fixed elements will follow the rolling * *.
This is the bug in the fixed elements and input boxes on IOS. It is not limited to type=text the input box, usually the soft keyboard (such as time and date selection, select selection, etc.) is aroused, will encounter the same problem.
Although isScroll.js it can be a good solution to the fixed problem of positioning scrolling, but not the last resort, we try not to rely on Third-party Library layout scheme to simplify implementation. Here for reference.
Solution Idea:
Since the soft keyboard call out under IOS, page fixed elements will be invalidated, resulting in the following page scrolling, if--the page will not be too long to appear scrolling, so even if fixed the element is not valid, also can not follow the page scrolling, it will not appear above the problem.
So according to this idea, if the parent of the fixed element does not scroll, and the original body scrolling area field is moved main internally, header and footer the style is unchanged, the code is as follows:
<body> <!--fixed-positioned head-->
Css:
header, footer, main {display:block}
header {position:fixed; height:50px; left:0; right:0; top:0;}
footer {position:fixed; height:34px; left:0; right:0; bottom:0;}
Main {/* main absolute positioning, internal rolling * * Position:absolute; top:50px; bottom:34px
; /* makes it possible to roll/overflow-y: scroll} Main. content {height:2000px;}
So look again:
Under the original input method, fixed elements can be positioned in the correct position on the page. Scrolling is main internal div , so scrolling is not followed by the page scrolling footer .
It seems to solve the problem, but if the actual test on the phone, you will find that main the elements within the rolling is very fluid, sliding fingers released, rolling immediately stop, lost the original smooth rolling characteristics. Baidu about the elastic scrolling problem, found in webkit , the following properties can be restored elastic scrolling.
mainAdd the attribute to the element, well, the silky smooth feeling is back!
In addition, here header and the footer use of fixed positioning, if taken into account older IOS systems do not support fixed elements, can be replaced completely fixed absolute . The effect is the same after the test.
This is done with a layout that does not rely on Third-party libraries fixed .
Android Bottom Layout
When it comes to IOS, let's talk a little bit about Android's layout.
In android2.3+, because it is not supported overflow-scrolling , there will be no fluent cotton in some browsers scrolling. But at the moment the scroll is found to be body smooth, so use the first fixed location layout that has problems with IOS.
If you need to consider Android2.3 the following systems because elements are not supported fixed , you still need to consider using isScroll.js to implement internal scrolling.
In fact fixed , and the problem of the input box, the basic idea is: due to fixed the soft keyboard after the expiration of the call, resulting in the page can scroll, will follow the page to scroll together. Therefore, if the page cannot be scrolled, the fixed element will not scroll even if it fails, and there will be no bugs.
So you can consider solving the problem in this respect.
Some other details to deal with
In the details of processing, in fact, there are a lot to pay attention to, pick a few actually encounter larger problems to say:
Sometimes after the input box focus , there will be soft keyboard occlusion of the input box, this time you can try to input repair the elements scrollIntoView . When using a third party input method under IOS, the input box will often be raised by the IME when it is aroused, and the input box is only surfaced when a text is entered. There is no good way to make sure that the input box is displayed correctly. This is a hole under IOS for the moment. Some third-party browsers at the bottom of the toolbar are floating on the page, so the bottom fixed positioning will be blocked by the toolbar. The solution is also simple and rough--fit with different browsers, adjusting the fixed distance from the bottom of the element. It is best to header footer disable and element touchmove events to prevent scrolling on top of a partial browser full-screen mode switch, which causes the top address bar and the bottom toolbar to block header and footer element. When the page scrolls to the top and bottom edges, dragging and dragging will drag the entire View together, leading to the "threadbare" of the page.
To prevent the page from threadbare, you can drag the page to the edge, by judging the drag and drop direction and whether the edge to prevent touchmove the event, preventing the page from continuing to drag.
Take the scroll layout above as layout-scroll-fixed An example, give a piece of code as a reference:
防止内容区域滚到底后引起页面整体的滚动
var content = Document.queryselector (' main '); var starty;content.addeventlistener (' Touchstart ', function (e) {starty = E . Touches[0].clienty;}); Content.addeventlistener (' Touchmove ', function (e) {//high indicating scroll up//Bottom position indicates downward scrolling///1 allows 0 to prohibit var status = ' one '; var ele = this; var currenty = E.touches[0].clienty; if (Ele.scrolltop = = 0) {
//If the content is smaller than the container it is prohibited to scroll up and down the
status = Ele.offsetheight >= ele.scrollheight? ' 00 ': ' 01 '; else if (ele.scrolltop + ele.offsetheight >= ele.scrollheight) {
//has been rolled to the bottom can only scroll up status = ' ten ';} if (Status!= ' One ') {
//To determine the current scrolling direction var direction = currenty-starty > 0? ' Ten ': ';
The operation direction and the current allowable state are evaluated and the operation result is 0, which means that the direction is not allowed to scroll, the default event is prevented, and the scrolling if (! parseint (Status, 2) & parseint (direction, 2)))
{stopevent (e);}});
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
