Question

我不太确定如何更好地标题，所以欢迎编辑。

基本上我想在固定div面板上的页面中设置右侧滑入面板的动画。

我的jQuery ajax做了它应该做的动画。但是，我只是注意到在添加sliding-panel后，有一个水平滚动条。确实是我的sliding-panel。

我怎样才能＆＃34;隐藏＆＃34;它没有扩展或允许用户水平滚动并找到空面板？

我的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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

作为一种可能的解决方案 - 在overflow-x: hidden标记上使用body。但是如果用户没有足够大的屏幕来显示整体，则不会出现水平滚动条。因此，您网站的可用性将大大降低。

我建议你看看这个css库，以实现滑动面板的效果 - https://daneden.github.io/animate.css/。然后，您只需要关注使用display: none隐藏面板，并在需要显示时向其添加bounceInRight课程。

如何在不扩展页面宽度的情况下添加右侧滑动窗格？

2 个答案: