不能专注于div（如果我用鼠标滚动它不会滚动，除非我点击内容）

So I've got a little website, that shows div when I click a link, so the window is on the front.

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

Just click on the big green frame, and you'll see the window opening. Now the thing is that, if you open it, and try to scroll, without having clicked the content, it won't scroll, while it should. How can I fix this ?

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

The code called is this one, the animation thing is based on keyframes.

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

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

Thank you in advance

先谢谢你

2 个解决方案

#1

You need to set focus on the new popup. Try to add Box.focus() call to displayBox function:

您需要将注意力集中在新的弹出窗口上。尝试将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);
}

Note, that since you animate your modal popup you need to focus content after animation is complete. The simplest way to achieve it is to invoke focus() after timeout equal to animation duration, in your case 300ms. If you don't want to hardcode animation timing in the JS function, then you should listen animationend event.

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

#2

You have set overflow: hidden for your html tag in css and so the page won't scroll.

你已经为css中的html标签设置了overflow：hidden，因此页面不会滚动。

Remove it to fix.

删除它来修复。

Overflow is a proprerty that explains how to handle what doesn't fit window size. Hidden means: hide it and doesn't show at all. Scroll is the default if you don't specify anything.

溢出是一种解释如何处理不适合窗口大小的内容。隐藏意味着：隐藏它并且根本不显示。如果您未指定任何内容，则滚动是默认设置。

#1