Javascript 使mathquill字段始终与光标一起滚动

Javascript 使mathquill字段始终与光标一起滚动,javascript,jquery,mathquill,Javascript,Jquery,Mathquill,当光标位于视口之外时,在Mathquill中,除非用户滚动,否则光标将保持隐藏状态。通常,与普通计算器视图一样,mathfield应随光标自动滚动,以便光标始终显示给用户 其他数学编辑器的行为: Mathquill的行为: 我尝试检查光标是否在视口外,然后自动滚动,但问题是光标失去焦点并成为空元素,我无法滚动到它。我使用以下代码解决了此问题: 首先,我添加了一个函数来检测光标是否位于视口源之外: function isElementVisible(el) { var rect = e

当光标位于视口之外时,在Mathquill中,除非用户滚动,否则光标将保持隐藏状态。通常,与普通计算器视图一样,mathfield应随光标自动滚动,以便光标始终显示给用户

其他数学编辑器的行为:

Mathquill的行为:


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

我使用以下代码解决了此问题:

首先,我添加了一个函数来检测光标是否位于视口源之外:

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))
    );
}
function scrollToCursor() {
    mathField.focus();
    var cursor = document.querySelector(".mq-cursor");
    if (cursor != null && !isElementVisible(cursor)) {
        document.querySelector(".mq-cursor").scrollIntoView();
    }
}

function onEditorKeyPress() {
    scrollToCursor();
}