1

ace编辑器设置惯性滚动

 2 years ago
source link: https://blog.ixk.me/post/ace-editor-sets-inertial-scrolling
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

ace编辑器设置惯性滚动

2019-05-11 • Otstar Lin •
本文最后更新于 268 天前，文中所描述的信息可能已发生改变

上个月我写了XK Editor这个项目，使用了 ace 编辑器和 tinymce 编辑器作为基础编辑器，但是当项目进入适配移动端的时候，遇到了一个很头疼的问题，ace 编辑器不支持惯性滚动，用起来会非常变扭，于是便为之增加惯性滚动的功能。

惯性滚动，即在触屏设备中滑动手指，当手指离开屏幕后，滚动事件并不会立即停止，而是会继续移动一段距离，这段距离是由手离开屏幕时的滚动速度和预设的摩擦力决定的，通过这时的速度，预设的摩擦力和特定的公式计算出一系列滚动点，然后逐个滚动到滚动点，来模拟惯性滚动。

  1. 监听开始触摸的事件，记录开始的时间和开始的坐标，同时重置滚动(防止连续滚动出现 Bug)
  2. 监听触摸结束的时间，记录结束的时间和结束的坐标
  3. 通过公式v = (endY - startY) / (endTime - startTime) * 1.5 1.5 的值可以调整
  4. 定义“摩擦力”deceleration = dir * 0.0018 0.0018 也可以调整
  5. 在每次微滚动前都计算一下滚动的坐标，然后进行滚动。
  6. 直至速度为 0 或者速度方向改变的时候停止滚动
1//惯性滚动
2var editorDom = document.querySelector(".ace-editor");
3var inertiaScrollTime = null;
4editorDom.addEventListener("touchstart", function (event) {
5  clearTimeout(inertiaScrollTime);
6  var startY = event.changedTouches[0].pageY;
7  var endY = 0;
8  var startTime = Date.now();
9  var endTime = 0;
10  editorDom.addEventListener("touchend", function (event) {
11    endY = event.changedTouches[0].pageY;
12    endTime = Date.now();
13    var _v = ((endY - startY) / (endTime - startTime)) * 1.5;
14
15    function scrollToTop(v, sTime, contentY) {
16      var dir = v > 0 ? -1 : 1;
17      var deceleration = dir * 0.0018;
18      var duration = v / deceleration;
19
20      function inertiaMove() {
21        // if(stopInertia) return
22        var nowTime = Date.now();
23        var t = nowTime - sTime;
24        var nowV = v + t * deceleration;
25        // 速度方向变化表示速度达到0了
26        if (dir * nowV > 0) {
27          return;
28        }
29        var moveY = (-(v + nowV) / 2) * t;
30        window.$ace.session.setScrollTop(contentY + moveY);
31        inertiaScrollTime = setTimeout(inertiaMove, 10);
32      }
33      inertiaMove();
34    }
35    scrollToTop(_v, endTime, window.$ace.session.getScrollTop());
36  });
37});

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK