从右向左滑动 div

Question

在下面的示例中，当我单击链接 message-window 时，div 从左向右滑动，但是当我将其属性 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

创建一个具有高度和宽度的包装器 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%;
}