删除块中的水平滚动，其中包含“位置：绝对”div

Question

http://codepen.io/evilandfox/pen/EVJeqm

我正在制作移动网站宽度侧边栏，通过左右滑动来显示。

有一个 div 容器，它包含另外三个 div 块：菜单（左侧边栏）、内容和右侧边栏。侧边栏位于内容的左侧和右侧，带有“位置：绝对”。因此，在滑动时添加类是通过更改容器的左侧位置来显示左侧或右侧边栏。

问题是容器有水平滚动条。 “溢出：隐藏”不起作用。你有什么想法吗？

所以，HTML

<div class="container">
  <div class="left-sidebar">
    I am menu
  </div>
  <div class="right-sidebar">
    I am additional content
  </div>
  <div class="content">
    I am content
  </div>
</div>

CSS

.container {
  position: relative;
}
.container > div {
  height: 200px;
}
.container-show-left-sidebar {
  left: 300px;
}
.container-show-right-sidebar {
  right: 300px;
}

.content {
  background-color: cyan;
}

.left-sidebar,
.right-sidebar {
  width: 300px;
  position: absolute;
  top: 0;
}
.left-sidebar {
  background-color: tomato;
  left: -300px;
}
.right-sidebar {
  background-color: yellow;
  right: -300px;
}

Answer 1

您可以将溢出：隐藏添加到 .container，但您需要将左侧边栏移至左侧：0，将右侧边栏移至右侧：0。

目前，如果您打开侧边栏，内容区域只会移动 - 您还需要从容器外部引入侧边栏。

我已经为您制作了一个 Codepen 分支，并进行了一些更改：

http://codepen.io/anon/pen/PPgyPg

首先，我们不会向左或向右移动内容，而是在左侧和右侧应用填充，因为侧边栏位于容器的边缘，我们最终会在两侧留出 300 像素的空白区域。

其次，我们将使用一些事件委托，而不是在按钮的 onclick 属性中使用 JS，并将类应用到侧边栏以将它们移入和移出：

// When your show content button is clicked
$('#show-content').on('click', function() {

    // Remove both left and right classes to reset padding
    $('#container').removeClass('container-show-right-sidebar container-show-left-sidebar');

    // Remove active classes from both sidebars
    $('.right-sidebar, .left-sidebar').removeClass('active');
});

// When your left sidebar button is clicked
$('#show-left-sidebar').on('click', function() {

    // Remove the right sidebar class if it's applied and add the left sidebar classs
    $('#container')
        .addClass('container-show-left-sidebar')
        .removeClass('container-show-right-sidebar');

    // Remove active class from right sidebar
    $('.right-sidebar').removeClass('active');

    // Add active class to left sidebar
    $('.left-sidebar').addClass('active');
});

// When your rightsidebar button is clicked
$('#show-right-sidebar').on('click', function() {

    // Remove the leftsidebar class if it's applied and add the rightsidebar class
    $('#container')
        .removeClass('container-show-left-sidebar')
        .addClass('container-show-right-sidebar');

    // Add active class to right sidebar
    $('.right-sidebar').addClass('active');

    // Remove active class from left sidebar
    $('.left-sidebar').removeClass('active');
});

Answer 2

我将overflow:hidden 添加到body 并且它正在工作。笔：http://codepen.io/anon/pen/RWOeaE