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
來源：簡書
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。