今天在忙网站的时候有个朋友探讨一个问题,在移动端实现点击滚动,没怎么想就回答说是和PC端一样,像下面
$('html', "body").ainmate({ scrollTop: xxx }, 1000);
后来朋友回复说问题,没解决我就想到了之前用移动端中制作局部滚动的方法:
.body{ padding-top: 48px; position: absolute; width: 100%; bottom: 0; top: 0; -webkit-overflow-scrolling: touch; transition: all 0.5s; -webkit-transition: all 0.5s; overflow: auto;}
这样的话html,body的高度只是100%,设置滚动当然不会有效果,那内部滚动是移动的谁呢,后来思考和实验之下发现移动的是.body;这样找到了移动的主体,问题是不是就解决了呢
$('.body').animate({ scrollTop: $('.body li[data-leter=' ++']').offset().top },1000);
结果发现问题并没有解决,反而会乱移动,找了半天才发现了可能的原因,offset()的定位原点是在窗口的顶边,而不是.body的顶边,所以当.body移动以后,我们想选择的DOM距离顶边的距离发生了变化,因此会出现乱滚动的现象,当找到这个问题以后就好解决了,当页面刚加载的时候.body距离顶边的距离是一定的,此时记录下我们想移动的DOM的距离顶部的距离,以后直接取这个定值就可以了,因此
$('.selector').each(function (i, item) { $(item).data('rees', $(item).offset().top - $('.body').offset().top);});
此时记录下来之后,当需要这个值的时候,只需要去取这个值,赋值给.body的scrollTop值即可解决这个问题。