博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端的点击滚动逻辑实现。
阅读量:5138 次
发布时间:2019-06-13

本文共 958 字,大约阅读时间需要 3 分钟。

  今天在忙网站的时候有个朋友探讨一个问题,在移动端实现点击滚动,没怎么想就回答说是和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值即可解决这个问题。

 

转载于:https://www.cnblogs.com/clearfix/p/4871680.html

你可能感兴趣的文章
存储(硬件方面的一些基本术语)
查看>>
Weka中数据挖掘与机器学习系列之基本概念(三)
查看>>
leetcode-Sort List
查看>>
中文词频统计
查看>>
Java泛型的基本使用
查看>>
bzoj2038 [2009国家集训队]小Z的袜子(hose)
查看>>
Postman-----如何导入和导出
查看>>
【Linux】ping命令详解
查看>>
8、RDD持久化
查看>>
第二次团队冲刺--2
查看>>
[转载]加密算法库Crypto——nodejs中间件系列
查看>>
使用Xshell密钥认证机制远程登录Linux
查看>>
【模板】最小生成树
查看>>
java面试题
查看>>
pair的例子
查看>>
uva 387 A Puzzling Problem (回溯)
查看>>
Oracle中包的创建
查看>>
django高级应用(分页功能)
查看>>
【转】Linux之printf命令
查看>>
关于PHP会话:session和cookie
查看>>