利用JS实现scroll自定义滚动效果详解


Posted in Javascript onOctober 17, 2017

前言

最近在公司开发项目的时候,原生滚动条中有些东西没办法自定义去精细的控制,于是开发一个类似于better-scroll一样的浏览器滚动监听的JS实现,下面我们就来探究一下自定义滚动需要考虑哪些东西,经过哪些过程。话不多说了,来一起看看详细的介绍吧。

选择滚动监听的事件

因为是自定义手机端的滚动事件,那我选择的是监听手机端的三个touch事件来实现监听,并实现了两种滚动效果,一种是通过-webkit-transform,一种是通过top属性。两种实现对于滚动的基本效果够能达到,可是top的不适合滚动中还存在滚动,可是能解决滚动中存在postion:fixed属性的问题;而transform可以实现滚动中有滚动,可是又不能解决postion:fixed的问题,所以,最后选择性考虑使用哪一种实现方式,用法一样。

主要的实现业务逻辑

handleTouchMove(event){
 event.preventDefault();
 this.currentY = event.targetTouches[0].screenY;
 this.currentTime = new Date().getTime();
 // 二次及以上次数滚动(间歇性滚动)时间和路程重置计算,0.05是间歇性滚动的停顿位移和时间比
 if (Math.abs(this.currentY - this.lastY) / Math.abs(this.currentTime - this.lastTime) < 0.05) {
  this.startTime = new Date().getTime();
  this.resetY = this.currentY;
 }
 this.distance = this.currentY - this.startY;
 let temDis = this.distance + this.oldY;
 /*设置移动最小值*/
 temDis = temDis > this.minValue ? temDis * 1 / 3 : temDis;
 /*设置移动最大值*/
 temDis = temDis < -this.maxValue ? -this.maxValue + (temDis + this.maxValue) * 1 / 3 : temDis;
 this.$el.style["top"] = temDis + 'px';
 this.lastY = this.currentY;
 this.lastTime = this.currentTime;
 this.dispatchEvent();
 this.scrollFunc(event);
},

代码解读:这是监听touchmove事件的回调,其中主要计算出目标节点this.$el的top或者-webkit-transform中translateY的值,而计算的参考主要以事件节点的screenY的垂直移动距离为参考,当然其中还要判断一下最大值和最小值,为了保证移动可以的超出最大值小值一定的距离所以加了一个1/3的移动计算。这里可能主要到了有一个间歇性滚动的判断和计算,主要是服务于惯性滚动的,目的是让惯性滚动的值更加精确。

handleTouchEnd(event){
 /*点透事件允许通过*/
 if (!this.distance) return;
 event.preventDefault();
 let temDis = this.distance + this.oldY;
 /*计算缓动值*/
 temDis = this.computeSlowMotion(temDis);
 /*设置最小值*/
 temDis = temDis > this.minValue ? this.minValue : temDis;
 /*设置最大值*/
 temDis = temDis < -this.maxValue ? -this.maxValue : temDis;
 this.$el.style["transitionDuration"] = '500ms';
 this.$el.style["transitionTimingFunction"] = 'ease-out';
 /*确定最终的滚动位置*/
 setTimeout(()=> {
  this.$el.style["top"] = temDis + 'px';
 }, 0);
 // 判断使用哪一种监听事件
 if (this.slowMotionFlag) {
  this.dispatchEventLoop();
 } else {
  this.dispatchEvent();
 }
 this.$el.addEventListener('transitionend', ()=> {
  window.cancelAnimationFrame(this.timer);
 });
 this.scrollFunc(event);
}

代码解读:这是touchend事件监听的回调,其中这里要判断是否要拦截click和tap事件,并且这里还要计算惯性缓动值,设置最终的最大最小值,以及设置动画效果和缓动效果。下面来谈一下滚性滚动的计算:

// 计算惯性滚动值
computeSlowMotion(temDis){
 var duration = new Date().getTime() - this.startTime;
 // 300毫秒是判断间隔的最佳时间
 var resetDistance = this.currentY - this.resetY;
 if (duration < 300 && Math.abs(resetDistance) > 10) {
  var speed = Math.abs(resetDistance) / duration,
   destination;
  // 末速度为0 距离等于初速度的平方除以2倍加速度
  destination = (speed * speed) / (2 * this.deceleration) * (resetDistance < 0 ? -1 : 1);
  this.slowMotionFlag = true;
  return temDis += destination;
 } else {
  this.slowMotionFlag = false;
  return temDis;
 }
},

代码解读:滚性滚动的算法主要是根据一个路程和时间计算出初速度,以及原生滚动的加速度的大于值0.006来计算滚动的总位移。这里主要还要判断一下一个300ms的经验值。

总结

大概的流程和思考就是这样了,后续还会增加更多的功能进行扩展

附上git地址:https://github.com/yejiaming/scroll

本地下载:http://xiazai.3water.com/201710/yuanma/js-scroll-custom(3water.com).rar

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
vue获取input输入值的问题解决办法
Oct 17 #Javascript
node.js 用socket实现聊天的示例代码
Oct 17 #Javascript
Bootstrap图片轮播效果详解
Oct 17 #Javascript
vue组件之Alert的实现代码
Oct 17 #Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 #Javascript
vue-cli之router基本使用方法详解
Oct 17 #Javascript
You might like
php下载excel无法打开的解决方法
2013/12/24 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
js中的this关键字详解
2013/09/25 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
企划主管岗位职责
2013/12/12 职场文书
工作的心得体会
2013/12/31 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
工人先进事迹材料
2014/12/26 职场文书
社区端午节活动总结
2015/02/11 职场文书
留学推荐信怎么写
2015/03/26 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
详解Python flask的前后端交互
2022/03/31 Python