使Mathquill字段始終使用光標滾動

Question

當光標在視口之外時，在Mathquill中，除非用戶滾動，否則光標保持隱藏狀態。 通常，像在普通計算器視圖中一樣，mathfield應該使用光標自動滾動，以便始終向用戶顯示光標。

其他數學編輯器的行為： https : //i.imgur.com/1JbRv2F.gifv

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

我試圖檢查光標是否在視口之外，然后自動滾動，但問題是光標失去了焦點並變成了null元素，因此無法滾動到它。

Answer 1

我通過使用以下代碼解決了這個問題：

首先，我添加了一個功能來檢測光標是否在視口之外（源： https : //stackoverflow.com/a/15203639/3880171 ）

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))
    );
}

我將onKeyUp事件添加到mathview：

<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();
}