删除块内的 "position:absolute" div 的水平滚动

Question

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

有一个 div 容器，其中包括另外三个 div 块：菜单（左侧栏）、内容和右侧栏。侧边栏位于内容的左侧和右侧 "position:absolute"。因此，在滑动时添加类是通过更改容器的左侧位置来显示左侧或右侧边栏。

问题是容器有水平滚动条。 "overflow: hidden" 不起作用。你有什么想法吗？

所以，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

您可以将 overflow: hidden 添加到 .container，但您将需要在单击它们时将左侧边栏移至左：0，将右侧边栏移至右：0。

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

我为您制作了一个 Codepen 分支，并做了一些改动：

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

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

其次，我们将使用一些事件委托而不是在按钮的 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

删除块内的 "position:absolute" div 的水平滚动

Remove horizontal scroll in block with "position:absolute" divs inside

css

css-position