Jquery对话框与空格键上的滚动

Question

We know that, the default functionality of a space bar in browser is to scroll to down if no input is active. similarly shift+space bar scroll top.

In my app, I'm using Jquery dialog on which if I press space bar when no input is active the background is scrolled instead of the dialog.

So, I added tabIndex = -1 which works fine when the dialog height is big (Means when the dialog has a scrollbar). But it is not working when the dialog has no scrollbar (Only the background is scrolling)

<div id="contactContainer" class="default-dialog" tabindex="-1"></div>

I don't want the user to prevent the space bar typing when no input is active. The scrolling should work normal as I press the space bar. If there is no scrollbar on the dialog, nothing should happen if I press the space bar.

Is anybody faced the same situation? Please give me a suggestion

Answer 1

The issue is, I've a container class which has some overflow elements. I did the following before I open the dialog

$('body, .container').addClass('overflow-hidden');

and I removed the class in the onClose event of the dialog

CSS:

.overflow-hidden { overflow: hidden}