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