ace编辑器设置惯性滚动

栏目: C++ · 发布时间: 5年前

内容简介:上个月我写了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())
    })
})

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

SRE

SRE

贝特西 拜尔 (Betsy Beyer)、等 / 孙宇聪 / 电子工业出版社 / 2016-10-1 / CNY 108.00

大型软件系统生命周期的绝大部分都处于“使用”阶段,而非“设计”或“实现”阶段。那么为什么我们却总是认为软件工程应该首要关注设计和实现呢?在《SRE:Google运维解密》中,Google SRE的关键成员解释了他们是如何对软件进行生命周期的整体性关注的,以及为什么这样做能够帮助Google成功地构建、部署、监控和运维世界上现存最大的软件系统。通过阅读《SRE:Google运维解密》,读者可以学习到......一起来看看 《SRE》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具