首页 文章

删除块中的水平滚动，其中“position：absolute”div为内部

提问于
浏览 次
1

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

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

有一个div容器，包括三个其他div块：菜单（左侧边栏），内容和右侧边栏 . 侧边栏位于内容的左侧和右侧，“position：absolute” . 因此，在滑动时添加类通过更改容器的左侧位置来显示左侧或右侧边栏 .

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

所以，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;
}
css css-position

2 回答

  • 1

    您可以添加overflow：hidden到.container，但是您需要将左侧边栏向左移动：0，右侧边栏向右移动：0点击它们时 .

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

    我为你做了一个Codepen fork，但有一些变化：

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

    首先，不是向左或向右移动内容，我们将在左侧和右侧应用填充，因为侧边栏位于容器的边缘，我们最终将在每侧有300px的空白区域 .

    其次，我们将使用一些事件委托，而不是在按钮上使用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');
});
    回复于
  • 0

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

    回复于

相关问题