javascript - 子 div 比父 div 宽并且在没有主体水平滚动的情况下与其重叠，父宽度 = 100%

Question

经过数小时的搜索和尝试，我无法弄清楚如何实现它。

我需要文档正文没有滚动条，无论是水平滚动条还是垂直滚动条。因此，以下 CSS 行可以解决问题:

body
{
height:100%;
width:100%;
}

body 标签内的标记是:

<div id="content">
    <div id="left_container"></div>
    <div id="center_container"></div>
    <div id="right_container"></div>    
</div>
<div id="footer">
    <a href="javascript:void(0);">
         move to left
    </a>
    <a href="javascript:void(0);" >
         move to right
    </a>
</div>

其他详细信息:

• div#footer 高度 + div#content 高度 = 100%。所以我正在使用:

#content
{
  height: calc( 100% - 60px);
}

#footer
{
  height: 60px;
}

• div#left_container 宽度 + div#center_container 宽度 = 100% AND div#center_container 宽度 + div#right_container 宽度 = 100%:

#left_container
{
   width:300px; 
   height:100%;
   float:left;
}

#right_container
{
    width:300px;
    height:100%;
    float:left;
}


#center_container
{
    width: calc(100% - 300px);
    height:100%;
    float:left;
}

我需要的是 div#content 为 100% + 300px 而不创建整个页面的水平滚动，重叠(物理上但不是眼睛) body 空间，并使用 jQuery.animate() 水平“滑动”，这样它只允许显示 left_container 和 center_container OR center_container 和 right_container 在给定时刻。页脚中的 anchor 负责触发两种情况之间的动画。

我希望下图能够说明我的目标:

感谢您平时的时间和帮助。

Answer 1

正如@Paulie_D 所说，您可以使用溢出隐藏

html {
  box-sizing: border-box;
  height:100vh;
  width:100vw;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body
{
  height:100%;
  width:100%;
  margin: 0;
  overflow:hidden
}

这是一个演示，将鼠标悬停在 id #content 上以查看实际效果

html {
  box-sizing: border-box;
  height:100vh;
  width:100vw;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body
{
  height:100%;
  width:100%;
  margin: 0;
  overflow:hidden
}

html {
  box-sizing: border-box;
  height:100vh;
  width:100vw;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body
{
  height:100%;
  width:100%;
  overflow:hidden
}

#left_container{
   background: #8DF5F5
}
#center_container
{
    width: calc(100vw - 300px);
    background: #99D9EA
}
#right_container
{
   background: #7092BE; 
}


#content
{
  position:relative;
  width: calc(100% + 300px);
  height: calc( 100% - 60px);
  transition: transform 1s
}
#content:hover{
  transform:translateX(-300px)
}
#left_container,#right_container
{
   width:300px; 
}

#left_container,#right_container,#center_container
{
   height:100%;
   float:left;
}
#footer
{
  height: 60px;
}

<div id="content">
    <div id="left_container"></div>
    <div id="center_container"></div>
    <div id="right_container"></div>    
</div>
<div id="footer">
    <a href="javascript:void(0);">
         move to left
    </a>
    <a href="javascript:void(0);" >
         move to right
    </a>
</div>

这是另一个使用 classList 的演示

var content, slideLeft, slideRight;

function addClassToContent(){
 content.classList.add("activated")
}
function removeClassToContent(){
 content.classList.remove("activated")
}
content = document.querySelector("#content");
slideLeft = document.querySelector(".slideLeft");
slideRight = document.querySelector(".slideRight");

slideLeft.addEventListener("click", addClassToContent,false);
slideRight.addEventListener("click", removeClassToContent,false)

html {
  box-sizing: border-box;
  height:100vh;
  width:100vw;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body
{
  height:100%;
  width:100%;
  margin: 0;
  overflow:hidden
}

html {
  box-sizing: border-box;
  height:100vh;
  width:100vw;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body
{
  height:100%;
  width:100%;
  overflow:hidden
}

#left_container{
   background: #8DF5F5
}
#center_container
{
    width: calc(100vw - 300px);
    background: #99D9EA
}
#right_container
{
   background: #7092BE; 
}


#content
{
  position:relative;
  width: calc(100% + 300px);
  height: calc( 100% - 60px);
  transition: transform 1s
}
#content.activated{
  transform:translateX(-300px)
}
#left_container,#right_container
{
   width:300px; 
}

#left_container,#right_container,#center_container
{
   height:100%;
   float:left;
}
#footer
{
  height: 60px;
}

<div id=content>
    <div id=left_container></div>
    <div id=center_container></div>
    <div id=right_container></div>    
</div>
<div id=footer>
    <a class=slideLeft>
         move to left
    </a>
    <a class=slideRight >
         move to right
    </a>
</div>