ページの幅を広げずに右のスライディングペインを追加するには？

Question

私はこれをより良いものにする方法がわからないので、編集を歓迎します。

基本的に、固定されたdivパネル上のページに右側のスライドインパネルをアニメーション化したかったのです。

私のjQuery ajaxは、アニメーション化するために何をするのでしょうか。しかし、私はちょうどsliding-panelを追加した後、水平スクロールバーがあることに気づいた。実際それは私のsliding-panelでした。

ユーザーを水平にスクロールして空のパネルを見つけることを許可しないで、「隠す」方法を教えてください。

私のHTMLは次のようになります。

<div class="left-pane"> 
    <div id="left-conent"></div> 
</div> 
<div class="sliding-panel" style="position: absolute;z-index: 1000;width: 400px;height: 90%;background-color: whitesmoke;right: -400px;"> 
    <div id="pane-content-edit" class="pane-content"> 
    </div> 
</div> 
<div id="right-pane" class="right-pane"> 
    <div id="pane-content" class="pane-content"> 
     ... 
    </div> 
</div> 

CSS：オーバーフローが必要とされていない場合

.right-pane{ 
    width:400px; 
    height:90%; 
    background-color: whitesmoke; 
    z-index: 999; 
    right: 0; 
    position: absolute; 

Answer 1

は体に適用します。可能な解決策として、およそoverflow

.right-pane { 
 
    width: 400px; 
 
    height: 90%; 
 
    background-color: whitesmoke; 
 
    z-index: 999; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 

 
body { 
 
    overflow: hidden; 
 
}

<div class="left-pane"> 
 
    <div id="left-conent"></div> 
 
</div> 
 
<div class="sliding-panel" style="position: absolute;z-index: 1000;width: 400px;height: 90%;background-color: whitesmoke;right: -400px;"> 
 
    <div id="pane-content-edit" class="pane-content"> 
 
    </div> 
 
</div> 
 
<div id="right-pane" class="right-pane"> 
 
    <div id="pane-content" class="pane-content"> 
 
    ... 
 
    </div> 
 
</div>

Answer 2

を読む - bodyタグにoverflow-x: hiddenを使用しています。しかし、ユーザーが全体を表示するのに十分な大きさの画面を持たない場合、水平スクロールバーは表示されません。したがって、あなたのウェブサイトのユーザビリティは大幅に減少します。

スライディングパネルの効果を得るために、このCSSライブラリをご覧になることをお勧めします。https://daneden.github.io/animate.css/display: noneであなたのパネルを隠す気にする必要があり、それを表示する必要があるときは、それにbounceInRightクラスを追加してください。