html - CSS HTML 隐藏屏幕右侧的字段

Question

我将一个表格放置在一个文档的右侧，只显示了它的一部分

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

我的风格是这样的（简化示例）

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

一切正常，除了底部的滚动条在隐藏表单时从左到右滚动，我不希望它出现。有人知道如何处理这个css问题吗？希望问题是可以理解的...

非常感谢

编辑：使用 matthias.p 提出的溢出规则，用户仍然可以按箭头键向右滚动

Answer 1

添加

overflow: hidden;

身体法则。

编辑： 你可以这样做：

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

我没有更改值，而是更改right了表单的宽度，overflow而是在表单上而不是在正文上进行了操作。现在您不能再使用箭头键在不悬停时显示表单。

Answer 2

使用下面的代码，100% + 默认边距导致问题

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 3

溢出的使用仍然允许使用箭头键。您可以像这样终止使用箭头键：

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