ios-scroll 和系統設定overflowscroll後卡頓

標籤：擷取   sla   設定   flow   console   作者   模組   一個   shu   

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
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

ios-scroll 和系統設定overflowscroll後卡頓