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 规则。

编辑: 你可以这样做:

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。现在您不能再使用箭头键在不悬停时显示表单。