Using JS to effectively solve the problem of Overflow:scroll scrolling attribute invalidation of HTML elements in mobile Web browsers __ garbled problem

Web mobile platform front-end UI development work, the compatibility problem is very many, today again encountered one. The product side requires that the content be displayed in a fixed-size container, but the number of content bars is unknown, and if there are too many bars, the container displays scroll bars. This bird is supposed to be so easy, the container is set dead wide, high, CSS plus attribute overflow:scroll; Can take the equipment to test when interesting, Pc all browser Normal, iOS normal, Android failure. The Mud horse works under Android and Overflow:hidden, and the overflow part is hidden.
Limited level, exhausted all kinds of milk to solve the problem, Google search is said to be the Android system bugs, and finally found a more reliable solution is a foreign expert developed a JS library, named Yue Iscroll 4. Pro-Test, easy to use, but efficiency is not flattering (take other people's things used, less TM nonsense).
Download Address: http://cubiq.org/iscroll-4
How to use:
1. Introduction of Iscroll.js
<script type= "Application/javascript" src= "Http://istyles.blog.163.com/blog/js/iscroll.js" ></script>
<script type= "Text/javascript" >
var Myscroll;
function loaded () {
Myscroll = new Iscroll (' wrapper ');
}
Document.addeventlistener (' domcontentloaded ', Loaded, false);
Window.onload = function () {
settimeout (function () {New Iscroll (document.getElementById (' Scroller ')}, 100)
};
</script>
2. Add the necessary styles
<style type= "Text/css" >
#wrapper {
position:relative;
Z-index:1;
height:200px; /* Desired element Height * *
}
</style>

3. Container plus id= "wrapper", Content plus id= "Scroller"
<div id= "wrapper" >
<ul id= "Scroller" >
<li></li>
...
<li></li>
</ul>
</div>

4. There is a picture of the truth

Iscroll Framework parsing (translation)

Profile

Iscroll 4 This version completely rewrites the original code for the Iscroll framework. This project was created entirely because mobile webkit browsers, such as Iphone,ipad,android, are used extensively to provide a localized way to slide the content of an element with a defined height and width. Unfortunately, in this case, all Web application pages will not be able to contain a Position:absolute header, footer, or an intermediate area where content can be scrolled.

However, the latest revision of the Android system has been able to support this feature (although not particularly well supported), and Apple seems reluctant to apply the One-finger sliding event to the DIV element.

In addition to the features of previous versions of Iscroll, Iscroll 4 includes the following features:

(1) Zoom (pinch/zoom)

(2) Pull Refresh (Pull Up/down to refresh)

(3) Speed and performance improvement

(4) Capturing elements accurately

(5) Custom scroll bar

Friendly tip: Iscroll 4 is not an easy alternative to Iscroll 3, and API documentation is different. Also, given that this version is in beta, some APIs may change slightly.

Use guide

In this document you will find many examples to teach you how to quickly get started with the Iscroll script library. See the demo example in this article and read this document carefully, may be a little boring, but this article is iscroll the essence of this script library OH.

Iscroll needs to initialize the elements to be scrolled, and does not limit the number of elements that use Iscroll in a page (this does not take into account your hardware configuration). The type and length of content in a scrolling element will, to some extent, affect the number of elements that can be used concurrently in the Iscroll script library. When using Iscroll this script library, the structure of the DOM tree is simple enough to remove unnecessary tags and try to avoid excessive tag nesting. The optimal use of the ISCROLL structure is as follows:

<div id= "wrapper" >

<ul>

<li></li>

.....

</ul>

</div>

In this small example, the UL tag will be scrolled. Iscroll must be contacted with the wrapper outside the scrolling content to have an effect.

"Precautions":

Only the first child in wrapper can scroll, and if you want more elements to scroll, you can try the following:

<div id= "wrapper" >

<div id= "Scroller" >

<ul>

<li></li>

...

</ul>

<ul>

<li></li>

...

</ul>

</div>

</div>

In this example, scroller this element can be scrolled, even if it contains two UL elements

Iscroll must be instantiated before the call, you can instantiate the Iscroll in the following situations:

(1) ondomcontentloaded

(2) OnLoad

(3) Inline inline mode

Let's talk about the pros and cons of each of these three uses.

ondomcontentloaded

Applies to scrolling content containing only text, pictures, and all pictures have a fixed size

How to use: (Add the following code to the head tag)

<script src= "Iscroll.js" ></script>

<script>

var Myscroll;

function loaded () {

Myscroll=new Iscroll ("wrapper");

}

Window.addeventlistener ("domcontentloaded", Loaded,false);

</script>

Note: myscroll This variable is global, so you can call its function anywhere

OnLoad

Sometimes it's a bit sloppy to initialize iscroll in a domcontentloaded state, so at this point the resources of the page may not be fully loaded. If you're having some weird behavior, try the following:

<script src= "Iscroll.js" ><script>

<script>

var Myscroll;

function loaded () {

settimeout (function () {

Myscroll=new Iscroll ("wrapper");

},100);

}

Window.addeventlistener ("Load", loaded,false);

</script>

In this case, the Iscroll will be initialized after the page resource (including the picture) is loaded 100ms, which should be a safer way to invoke the Iscroll.

Inline initialization
This scenario will be called when the page is loaded into JS, this method is not recommended, but a lot of JavaScript Daniel is in this way, I have no reason to disagree.

<script src= "Iscroll.js" ></script>

<div id= "wrapper" >

<ul>

<li></li>

...

</ul>

</div>

<script>

var myscroll=new iscroll ("wrapper");

</script>

However, it is recommended that you use some framework ready methods to securely invoke Iscroll (such as ready () in jquery).

Parameters passed in the Iscroll

The second argument in Iscroll allows you to customize something, such as the following code:

<script>

var myscroll=new iscroll ("wrapper", {hscrollbar:false, vscrollbar:false});

</script>

The second parameter is usually an object, as in the example above, the scroll bar is not displayed. The commonly used parameters are as follows:

HScroll false prevents horizontal scrolling true horizontal scrolling defaults to True

VScroll false Fine Vertical scrolling true vertical scrolling defaults to True

HScrollBar false hides scroll bars in horizontal direction

VScrollBar false to hide scroll bars in the vertical direction

Fixedscrollbar on the iOS system, when the element is dragged beyond the bounds of the scroller, the scroll bar shrinks and is set to

True to prevent scroll bars from exceeding the visible area of scroller. The default is true on Android,

False on iOS

Fadescrollbar false to hide scroll bars when no fade effect is required

Hidescrollbar Hide scroll bar defaults to True when no user interaction

Bounce enable or disable the bounce of boundaries, the default is True

Momentum enable or disable inertia, the default is true, this parameter is useful when you want to save resources

Lockdirection false to unlock the drag direction, true to drag only in one Direction

(Up/down or Left/right) to maintain the integrity of the resource, it is recommended to remove the scroll bar

Pull refresh (pull to refresh)

This effect has become very popular since Twitter and some of Apple's localized apps have done so. You can see here first. I recently separated the "Pull to refresh" section as an additional plugin for iscroll. You can click here to see how pull to refresh works. All you have to do is customize the Pulldownaction () method. You may need an AJAX to load the new content, but once the DOM tree changes, remember to call the Refresh method. It is to be remembered that in the example we added a delay of 1 seconds to simulate the delay effect of the network. Of course, if you do not want to use this delay, then the SetTimeout method to remove the line.

Zoom (Pinch/zoom)

We have to face the fact that there is nothing new in the light rolling. That's why in the Iscroll 4 version we allow you to zoom in and out. To do this, you can use gestures to zoom in and out by simply setting the magnified parameter zoom to TRUE. You can see here. Double-click the zoom in and zoom out function is also supported in Iscroll 4. To use the zoom feature, you need at least the following configuration:

var myscroll =new Iscroll ("wrapper", {zoom:true});

If you want to customize the zoom feature in depth, you can use the following options:

ZOOMMAX Specifies the maximum number of magnification allowed, the default is 4

"Caution": If you want the image scaling to be good, put them in the hardware's compositing layer. Popular point, it is in all need to scale the IMG element to use-webkit-transform:translate3d (0,0,0) to achieve, and especially important, hardware acceleration will take up a lot of resources, use caution, otherwise your application may collapse.

Capture Element (snap and Snap to element)

The

         capture feature will encourage scroller to redefine the location, making it more fancy for conveyor belts.