内容简介:上个月我写了XK Editor这个项目,使用了ace编辑器和tinymce编辑器作为基础编辑器,但是当项目进入适配移动端的时候,遇到了一个很头疼的问题,ace编辑器不支持惯性滚动,用起来会非常变扭,于是便为之增加惯性滚动的功能。惯性滚动,即在触屏设备中滑动手指,当手指离开屏幕后,滚动事件并不会立即停止,而是会继续移动一段距离,这段距离是由手离开屏幕时的滚动速度和预设的摩擦力决定的,通过这时的速度,预设的摩擦力和特定的公式计算出一系列滚动点,然后逐个滚动到滚动点,来模拟惯性滚动。
上个月我写了XK Editor这个项目,使用了ace编辑器和tinymce编辑器作为基础编辑器,但是当项目进入适配移动端的时候,遇到了一个很头疼的问题,ace编辑器不支持惯性滚动,用起来会非常变扭,于是便为之增加惯性滚动的功能。
原理
惯性滚动,即在触屏设备中滑动手指,当手指离开屏幕后,滚动事件并不会立即停止,而是会继续移动一段距离,这段距离是由手离开屏幕时的滚动速度和预设的摩擦力决定的,通过这时的速度,预设的摩擦力和特定的公式计算出一系列滚动点,然后逐个滚动到滚动点,来模拟惯性滚动。
实现方案
v = (endY - startY) / (endTime - startTime) * 1.5 deceleration = dir * 0.0018
实现代码
//惯性滚动 var editorDom = document.querySelector('.ace-editor') var inertiaScrollTime = null editorDom.addEventListener('touchstart', function (event) { clearTimeout(inertiaScrollTime) var startY = event.changedTouches[0].pageY var endY = 0 var startTime = Date.now() var endTime = 0 editorDom.addEventListener('touchend', function (event) { endY = event.changedTouches[0].pageY endTime = Date.now() var _v = (endY - startY) / (endTime - startTime) * 1.5 function scrollToTop(v, sTime, contentY) { var dir = v > 0 ? -1 : 1 var deceleration = dir * 0.0018 var duration = v / deceleration function inertiaMove() { // if(stopInertia) return var nowTime = Date.now() var t = nowTime - sTime var nowV = v + t * deceleration // 速度方向变化表示速度达到0了 if (dir * nowV > 0) { return } var moveY = -(v + nowV) / 2 * t window.$ace.session.setScrollTop(contentY + moveY) inertiaScrollTime = setTimeout(inertiaMove, 10) } inertiaMove() } scrollToTop(_v, endTime, window.$ace.session.getScrollTop()) }) })
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 如何摆脱 “技术思维” 的惯性?
- 我做编辑器这些年:钉钉文档编辑器的前世今生
- 有爱编辑器 1.7.1 发布,mysql 编辑器 GUI
- 小书匠编辑器 6.0.0 发布,好用的 Markdown 编辑器
- 小书匠编辑器 6.0.0 发布,好用的 Markdown 编辑器
- 10个最佳富文本编辑器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Twenty Lectures on Algorithmic Game Theory
Tim Roughgarden / Cambridge University Press / 2016-8-31 / USD 34.99
Computer science and economics have engaged in a lively interaction over the past fifteen years, resulting in the new field of algorithmic game theory. Many problems that are central to modern compute......一起来看看 《Twenty Lectures on Algorithmic Game Theory》 这本书的介绍吧!