半屏固定，半屏滚动到内容的部分。然后反转部分
section with half screen fixed, half scroll to content. Then invert section
好的，我正在尝试创建一个分屏布局（如果可能的话使用 flexbox），其中一个容器固定在屏幕的左半部分，而另一半屏幕上的容器用于容纳文章内容滚动.当到达内容末尾时，整个部分应自由滚动到下一部分，这将是第一部分的倒数（固定在右侧，内容在左侧滚动。将有四个部分倒置，直到我到达页脚. 这个 JSFiddle 正是我要找的东西，我只需要知道如何反转和添加下一部分，以便它们按规定流动。
http://jsfiddle.net/avrahamcool/dtWWA/
这是每个部分布局的粗略概述。
http://jsfiddle.net/QMsuD/191/
#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;
}
<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>
您应该能够将 #overflow: hidden 添加到 container-main，并将 overflow: scroll 添加到 #container-content 以实现右侧部分滚动而左侧部分保持静止的目标直到你到达两者的尽头。
您可以制作一堆 flex 行作为您的主要部分，为要滚动的部分添加 overflow-y: scroll，将边栏设置为 position: sticky 以使整个部分均匀滚动如果鼠标悬停在内容区域上，则将内容区域和侧边栏设置为 flex-grow: 1（或简称 flex: 1 0 0），将它们按 50/50 的宽度拆分。然后在内容中绝对放置一个元素，以便主要部分将匹配侧边栏的高度。
然后要反转 sidebar/content 所在的一侧，您可以使用 :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>
好的，我正在尝试创建一个分屏布局（如果可能的话使用 flexbox），其中一个容器固定在屏幕的左半部分，而另一半屏幕上的容器用于容纳文章内容滚动.当到达内容末尾时，整个部分应自由滚动到下一部分，这将是第一部分的倒数（固定在右侧，内容在左侧滚动。将有四个部分倒置，直到我到达页脚. 这个 JSFiddle 正是我要找的东西，我只需要知道如何反转和添加下一部分，以便它们按规定流动。
http://jsfiddle.net/avrahamcool/dtWWA/
这是每个部分布局的粗略概述。
http://jsfiddle.net/QMsuD/191/
#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;
}
<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>
您应该能够将 #overflow: hidden 添加到 container-main，并将 overflow: scroll 添加到 #container-content 以实现右侧部分滚动而左侧部分保持静止的目标直到你到达两者的尽头。
您可以制作一堆 flex 行作为您的主要部分，为要滚动的部分添加 overflow-y: scroll，将边栏设置为 position: sticky 以使整个部分均匀滚动如果鼠标悬停在内容区域上，则将内容区域和侧边栏设置为 flex-grow: 1（或简称 flex: 1 0 0），将它们按 50/50 的宽度拆分。然后在内容中绝对放置一个元素，以便主要部分将匹配侧边栏的高度。
然后要反转 sidebar/content 所在的一侧，您可以使用 :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>