内容简介:上个月我写了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个最佳富文本编辑器
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Struts 2 in Action
Don Brown、Chad Davis、Scott Stanlick / Manning Publications / 2008.3 / $44.99
The original Struts project revolutionized Java web development and its rapid adoption resulted in the thousands of Struts-based applications deployed worldwide. Keeping pace with new ideas and trends......一起来看看 《Struts 2 in Action》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
RGB转16进制工具
RGB HEX 互转工具