从右向左滑动div [英] Slide div from right to left

问题描述

在下面的示例中，当我单击链接message-window时，div从左向右滑动，但是当我将其属性left:-100px更改为right:-100px时，该幻灯片可以工作，但会出现水平滚动.如何防止水平滚动出现?

I the below example, when I click on link message-window the div slides from left to right, but when I change its property left:-100px to right:-100px the slide works but a horizontal scroll appears. How can we prevent the horizontal scroll appearing?

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');
    }
    });
});

这是一个jsfiddle

推荐答案

创建一个具有高度和宽度的包装div，将overflow属性设置为hidden，以消除水平滚动问题.

Create a wrapper div with height and width, set the overflow property to hidden in order to get rid of the horizontal scroll issue.

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');
    }
    });
});

选中此

这篇关于从右向左滑动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！