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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/lizhibk/p/8623503.html