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，将overflow属性设置为hidden以消除水平滚动问题。

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%;
}

从右到左滑动div

2 个答案: