部分半屏固定，半滚动内容。然后反转部分

时间：2017-07-17 20:44:44

标签： css css3 flexbox responsive

好的我正在尝试创建一个分屏布局（如果可能的话，使用flexbox），将一个容器固定到屏幕的左半部分，而屏幕另一半的容器保存文章内容滚动。当到达内容的结尾时，整个部分应该自由滚动到下一部分，这将是第一部分的反面（固定的右边，滚动内容在左边。将有四个部分倒置，直到我到达页脚这个JSFiddle几乎就是我要找的东西，我只需要知道如何反转并添加下一部分，使它们按照说明流动。

http://jsfiddle.net/avrahamcool/dtWWA/

这是如何布置每个部分的大致轮廓。

http://jsfiddle.net/QMsuD/191/

＆＃13;
＆＃13; 
#container-main {
  background: tan;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: flex-start;
}

#container-gray {
  background: gray;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 50%;
  justify-content: center;
}

#container-black {
  background: black;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  justify-content: flex-end;
}

#hello {
  background: blue;
  flex: .5;
  align-self: center;
}

#container-nav {
  background: white;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#how {
  background: orange;
}

#are {
  background: purple;
}

#you {
  background: pink;
}

#container-content {
  background-color: beige;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  justify-content: flex-start;
}

.headings {
  width: 49%;
  align-self: center;
  flex: 1;
}

.articles {
  width: 85%;
  align-self: center;
}
＆＃13; 
<div id=container-main>
  <div id="container-gray">
    <div id="container-black">
      <p id="hello">Hello</p>
      <div id="container-nav">
        <p id="how">How</p>
        <p id="are">are</p>
        <p id="you">you</p>
      </div>
    </div>
  </div>
  <div id="container-content">
    <h1 class="headings">First heading</h1>
    <article class="articles">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
      nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
    </article>
    <h1 class="headings">Second heading</h1>
    <article class="articles">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
      nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
    </article>
    <h1 class="headings">Third heading</h1>
    <article class="articles">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
      nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
    </article>
    <h1 class="headings">Fourth heading</h1>
    <article class="articles">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
      nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
    </article>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您应该可以将#overflow: hidden添加到container-main，将overflow: scroll添加到#container-content，以实现右侧部分滚动的目标，同时左侧部分保持静止，直到您到达两者的末尾。

答案 1 :(得分：0)

您可以将一大堆flex行作为主要部分，为要滚动的部分添加overflow-y: scroll，将侧边栏设置为position: sticky以使整个部分滚动即使鼠标位于内容区域上方，然后将内容区域和侧边栏设置为flex-grow: 1（或简称为flex: 1 0 0），将它们分成50/50宽度。然后绝对将一个元素放在内容中，以便主要部分匹配侧边栏的高度。

然后，要反转侧边栏/内容所在的一侧，您可以将:nth-child()与flex order属性结合使用。

* {box-sizing:border-box;}

section {
  max-width: 640px;
  overflow-y: scroll;
  margin: auto;
  border: 1px solid #999;
  display: flex;
  background: #333;
}
section:nth-child(even) main {
  order: -1;
}
aside,main {
  flex: 1 0 50%;
}
aside,.inner {
  padding: .5em;
}
aside {
  background: #eee;
  position: sticky;
  top: 0; left: 0;
}
main {
  position: relative;
  color: white;
}
.inner {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
<section>
  <aside>
    aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>

  </aside><main>
    <div class="inner">
      main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>

    </div>

  </main>
</section>
<section>
  <aside>
    aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>

  </aside><main>
    <div class="inner">
      main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>

    </div>

  </main>
</section>
<section>
  <aside>
    aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>

  </aside><main>
    <div class="inner">
      main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>

    </div>

  </main>
</section>
<section>
  <aside>
    aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>

  </aside><main>
    <div class="inner">
      main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>

    </div>

  </main>
</section>

相关问题
最新问题