CSS HTML hiding a field from screen's right - html

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

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.

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

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