ios-scroll 和系统设置overflowscroll后卡顿

select_category: function(e) {
// console.log($(this));
// 如果有now类名则返回
var index = $(this).attr("index");
var total=0;
var ul_ele,ul_height=0,hd_height=0;
// 设置下划线宽度和到左侧距离
// var line_width = $(this).width() + 40 +'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获取的是dom元素是dom对象
// 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);

// 用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)');

},

------
给dom元素设置scroll有兼容问题，此时必须给window设置scroll

 

---------

最近的一次开发中，使用到了overflow：scroll 属性来滑动div。
如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。
但是在android系统的手机上则不会出现该问题。大家不妨可以分别使用IOS和Android系统的手机浏览以下链接，滑动文字区域查看该效果(重点是记住iPhone浏览时的效果，方便浏览后文)：http://geek100.com/demo/os.html.
以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;，是因为这行代码启用了硬件加速特性，所以滑动很流畅。

实际上，Safari真的用了原生控件来实现，对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。

在WebKit 108400版本左右才支持，所以iOS Safari应该是需要5.0。Android则是在4.0以上支持。
从前端开发的角度讲，只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。

作者：独享奢华
链接：http://www.jianshu.com/p/1f4693d0ad2d
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。