Mega Man screen scrolling in JavaScript

Question

I'm trying to create screen transitions similar to those found in Mega Man or Legend of Zelda (i.e. the active elements of the first screen are stopped as the screen scrolls in the direction of the new screen then the active elements of the new screen become active again). I'm making this for a 2D browser game written in JavaScript.
Right now, I can only make the screen scroll as long as the player remains on the edge of the screen; the player can still move when the transition is taking place, which stops the scrolling midway through transition. Below is the code I'm using to make this happen. If anyone can help me with this, I would really appreciate it.

//checks if player has touched right side of screen
//*used to change screen color
if(this.rightX == gameWidth){
    screenShift = true;
    if(bgDrawX2 > 600){
        bgDrawX-=5;
        bgDrawX2-=5;
        drawBg();
    }
    screenShift = false;
}

if(this.leftX == 0){
    screenShift = true;
    if(bgDrawX2 < 1200){
        bgDrawX+=5;
        bgDrawX2+=5;
        drawBg();
    }
    screenShift = false;
}

Answer 1

I don't know most of your code but, apparently you have already a global variabel to hold the scrolling-state (screenShift). Why not simply ignore all incoming key/control-events until the variable screenShift is false again?