0

一部のみを表示しているドキュメントの右側にフォームを配置しました

<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 によって提案されたオーバーフロー ルールを使用すると、ユーザーは矢印キー パッドを押して右にスクロールできます。

4

3 に答える 3

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し、本体ではなくフォームで実行しました。ホバリングしていないときは、矢印キーを使用してフォームを表示できなくなりました。

于 2012-08-15T11:52:59.380 に答える
0

以下のコードを使用してください。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;
}
于 2012-08-15T12:49:36.723 に答える
0

オーバーフローを使用すると、矢印キーを使用できます。次のように矢印キーの使用を強制終了できます。

$(document).keydown(function(event) {
     switch(event.keyCode){
        case 37:
        case 39:
            return false;
            break;
     }
 });
于 2012-08-15T12:21:49.180 に答える