Ios-scroll and System Setup Overflowscroll

Select_category:function (e) {
Console.log ($ (this));
Returns if there is a now class name
var index = $ (this). attr ("index");
var total=0;
var ul_ele,ul_height=0,hd_height=0;
Set the underline width and distance to the left
var line_width = $ (this). Width () + + + ' px ';
$ (". Line"). CSS ("width", line_width);
var left_distance = $ (this). Offset (). Left + "px";
Console.log (left_distance);
$ (". Line"). CSS ("left", left_distance);
$ (this). Siblings (). Removeclass ("Now");
$ (this). AddClass ("Now");
for (var i=0; i< index; i++) {
Ul_ele = $ (". Cate-list"). Children ("ul") [I];
Ul_ele gets the DOM element is the DOM object
Console.log (Ul_ele);
Ul_height + = $ (ul_ele). CSS ("height"). Slice (0,-2)-0;
Console.log (Ul_height);
}
Hd_height = (Index) * 40 + 85;
All_height = (hd_height + ul_height-85);

With scroll
Console.log (Hd_height);
Console.log (Ul_height);
Console.log (All_height);
Window.scrolltop = All_height;
Document.documentElement.scrollTop (All_height);

$ (window). scrolltop (All_height);
Console.log ($ (". Bottom"). ScrollTop ());
Action.dom.cateList.css (' transform ', ' Translatey (' + (-all_height) + ' px) ');

},

------
Set the scroll compatibility problem for DOM elements, you must set the window to scroll

---------

In a recent development, the Overflow:scroll attribute was used to slide the div.
If you use the Overflow:scroll attribute on a div or module, you'll see a noticeable lag when browsing on your iOS system's phone.
However, the problem does not occur on the Android phone. You may wish to use the iOS and Android phone to browse the following links, slide the text area to see the effect (the key is to remember the effect of the iphone browsing, easy to browse later): http://geek100.com/demo/os.html.
The following code solves the problem with this lag:-webkit-overflow-scrolling:touch, because this line of code enables hardware acceleration features, so the swipe is smooth.

In fact, Safari really uses native controls, and for pages with-webkit-overflow-scrolling, a uiscrollview is created that provides a child layer for use by the rendering module.

Support is available around the WebKit 108400 version, so iOS safari should be required for 5.0. Android is supported at more than 4.0.
From the front-end development point of view, only need to know the CSS properties-webkit-overflow-scrolling is really created with hardware acceleration of the system-level control, so the efficiency is very high.

Exclusive Luxury
Links: http://www.jianshu.com/p/1f4693d0ad2d
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

Ios-scroll and System Setup Overflowscroll