CSS HTML hiding a field from screen's right

Question

I positioned a form to the right of a document showing only a part of it

<form class="right-form">
   <textarea></textarea>
   <input type="submit" value="submit"></div>
</form>

and I styled like this(simplified example)

 body{
   height: 100%;
   width: 100%;
 }

.right-form{
   position:absolute;
   rigth: -220px;
   width: 250px
   transition: width 0.5s ease 0s, right 0.5s ease 0s;
}
.right-form:hover{
   right: 0px;
}

Everything works well except the scroll bar at the bottom appears to scroll left to the right when the form is hidden, and I do not want it to appear. Someone knows how to deal with this css problem? Hope the problem is understandable...

Thanks a lot

EDIT: with the overflow rule proposed by matthias.p the user can still press the arrow key pad a scroll to the right

Answer 1

Use the below code, the 100% + the default margin is causing the issue

body{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

.right-form{
     position:absolute;
     rigth: -220px;
     width: 250px
     transition: width 0.5s ease 0s, right 0.5s ease 0s;
}
.right-form:hover{
     right: 0px;
}

Answer 2

Usage of overflow does still allow the usage of arrow keys.. You can kill the usage of arrow keys like this:

$(document).keydown(function(event) {
     switch(event.keyCode){
        case 37:
        case 39:
            return false;
            break;
     }
 });

Answer 3

Add

overflow: hidden;

to the body rule.

Edit: You could do this:

body {
height: 100%;
width: 100%;
}
.right-form {
position:absolute;  
right: 0;
width: 30px;
overflow: hidden;
transition: width 0.5s ease;
}
.right-form:hover {
width: 250px;
}

Instead of changing the right value I have changed the width of the form and did the overflow on the form instead on the body. Now you cannot use the arrow keys anymore to display the form when not hovering.