javascript - 无法专注于 div(如果我用鼠标滚动它不会滚动，除非我单击内容)

Question

所以我有一个小网站，当我点击一个链接时它会显示 div，所以窗口在前面。

只需单击绿色的大框，您就会看到打开的窗口。现在的问题是，如果您打开它并尝试滚动，但没有单击内容，它不会滚动，而它应该滚动。我该如何解决这个问题？

调用的代码是这个，动画的东西是基于关键帧的。

function displayBox(boxId, closeButtonId) {
    displayButton(closeButtonId);
    var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'boxIn');
    Box.setAttribute('tabIndex', '0');
}
function displayButton(buttonId) {
    var Box = document.getElementById(buttonId);
    Box.setAttribute('class', 'buttonIn');
}           
function hideBox(boxId, closeButtonId) {
    var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'boxOut');
    setTimeout(function(){var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'invisible');},500);
    hideButton(closeButtonId);
}
function hideButton(buttonId) {
    var Box = document.getElementById(buttonId);
    Box.setAttribute('class', 'invisible');
}

提前致谢

Answer 1

您需要将焦点设置在新弹出窗口上。尝试将 Box.focus() 调用添加到 displayBox 函数:

function displayBox(boxId, closeButtonId) {
    displayButton(closeButtonId);
    var Box = document.getElementById(boxId);
    Box.setAttribute('class', 'boxIn');
    Box.setAttribute('tabIndex', '0');
    setTimeout(function() {
        Box.focus();
    }, 300);
}

请注意，由于您为模态弹出窗口设置动画，因此您需要在动画完成 之后关注内容。实现它的最简单方法是在超时等于动画持续时间后调用 focus()，在您的情况下为 300ms。如果你不想在 JS 函数中硬编码动画时间，那么你应该监听 animationend 事件。