divを右から左にスライド

Question

下の例では、リンクmessage-windowを左から右にスライドしますが、そのプロパティを変更すると、left:-100pxはright:-100pxに変更されますが、横スクロールが表示されます。水平スクロールが表示されないようにするにはどうすればよいですか？

HTML：

<div class="message-window">Here I am !</div> 
<div class="red-box">Fixed div</div> 

<a href="#" class="photo-details-messages" style="position:absolute; top:400px">Show/hide Slide Panel</a> 

はCSS：

.red-box, .message-window { 
    height:350px; 
} 

.red-box { 
    width: 100%; 
    background: red; 
    z-index:1; 
    position:absolute; 
} 

.message-window { 
    width:100%; 
    z-index:2; 
    position:absolute; 
    left:-100%; 
    background:#f90; 
    color:#000; 
} 

のjQuery：

$(document).ready(function(){ 
    $('.photo-details-messages').click(function(){ 
    var hidden = $('.message-window'); 
    if (hidden.hasClass('visible')){ 
     hidden.animate({"left":"-100%"}, "slow").removeClass('visible'); 
    } else { 
     hidden.animate({"left":"0px"}, "slow").addClass('visible'); 
    } 
    }); 
}); 

Here is a jsfiddle

Answer 1

にoverflowプロパティを設定し、高さと幅とラッパーのdivを作成します。水平スクロールの問題を取り除くために隠されています。

HTML：

<div id="container"> 
    <div class="message-window">Here I am !</div> 
    <div class="red-box">Fixed div</div> 
</div> 


<a href="#" class="photo-details-messages" style="position:absolute; top:400px">Show/hide Slide Panel</a> 

CSS：

#container{ 
    width:100vw; 
    height: 100vh; 
    position: relative; 
    overflow: hidden; 
} 
.red-box, .message-window { 
    height:350px; 
} 

.red-box { 
    width: 100%; 
    background: red; 
    z-index:1; 
    position:absolute; 
} 

.message-window { 
    width:100%; 
    z-index:2; 
    position:absolute; 
    left:100%; 
    background:#f90; 
    color:#000; 
} 

JS：

$(document).ready(function(){ 
    $('.photo-details-messages').click(function(){ 
    var hidden = $('.message-window'); 
    if (hidden.hasClass('visible')){ 
     hidden.animate({"left":"100%"}, "slow").removeClass('visible'); 
    } else { 
     hidden.animate({"left":"0"}, "slow").addClass('visible'); 
    } 
    }); 
}); 

check this

Answer 2

あなたは2つの小さな変更を加える必要があり

<div class="rel"> 
    <div class="message-window">Here I am !</div> 
    <div class="red-box">Fixed div</div> 
</div> 

とCSSで

.rel{ 
    overflow-x: hidden; 
    position:relative; 
    height:350px; 
    width:100%; 
}