使 mathquill 字段始终随光标滚动

Question

当光标在视口之外时，在 Mathquill 中光标保持隐藏状态，除非用户滚动。通常像在普通计算器视图中一样，数学字段应随光标自动滚动，以便始终向用户显示光标。

其他数学编辑的行为： https://i.imgur.com/1JbRv2F.gifv

Mathquill 的行为： https://i.imgur.com/9E15uS2.gifv

我尝试检查光标是否在视口之外，然后自动滚动，但问题是光标失去焦点并变成空元素，我无法滚动到它。

Answer 1

我使用以下代码解决了这个问题：

首先我添加了一个函数来检测光标是否在视口之外（来源：）

function isElementVisible(el) {
    var rect = el.getBoundingClientRect(),
        vWidth = window.innerWidth || document.documentElement.clientWidth,
        vHeight = window.innerHeight || document.documentElement.clientHeight,
        efp = function (x, y) {
            return document.elementFromPoint(x, y)
        };

    // Return false if it's not in the viewport
    if (rect.right < 0 || rect.bottom < 0
        || rect.left > vWidth || rect.top > vHeight)
        return false;

    // Return true if any of its four corners are visible
    return (
        el.contains(efp(rect.left, rect.top))
        || el.contains(efp(rect.right, rect.top))
        || el.contains(efp(rect.right, rect.bottom))
        || el.contains(efp(rect.left, rect.bottom))
    );
}

我向 mathview 添加了 onKeyUp 事件：

<span id="expression" onkeyup="onEditorKeyPress()"></span>

最后，实现滚动魔法的函数是：

function scrollToCursor() {
    mathField.focus();
    var cursor = document.querySelector(".mq-cursor");
    if (cursor != null && !isElementVisible(cursor)) {
        document.querySelector(".mq-cursor").scrollIntoView();
    }
}

function onEditorKeyPress() {
    scrollToCursor();
}

使 mathquill 字段始终随光标滚动

Make mathquill field scroll always with the cursor

javascript

jquery

mathquill