prevent scroll on all but one column

nicole 0
Viewed 42

in my previous question, that was kindly answered, I got 5 columns lined up. I'm wondering how I can prevent the columns from "moving vertically" when I scroll the page/body, except! column "C" which I want to move, as its the main one that will hold content, that in turn will make the page scrollable.

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
  display: flex;
}

.col {
  /* display: inline-block; */
  position: relative;
  height: 100%;
  padding: 0 10px;
}

.a {
  background-color: #2a85ff;
  width: 20%;
}

.b {
  background-color: #83bf6e;
  width: 100px;
}

.c {
  background-color: #ff6a55;
  flex-grow: 2;
  height:2000px
}

.c span {
  font-weight: bolder;
}

.d {
  background-color: #8e59ff;
  width: 200px;
}

.e {
  background-color: #b5e4ca;
  width: 20%;
}
<div class="col a">
  <h1>A</h1>
  w:%percent
  <br /> h:100%
  <br/> scroll:no
</div>

<div class="col b">
  <h1>B</h1>
  w:pixel
  <br /> h:100%
  <br/> scroll:no
</div>

<div class="col c">
  <h1>C</h1>
  <span>w:remaining</span>
  <br /> h:100%
  <br/> scroll:yes
</div>

<div class="col d">
  <h1>D</h1>
  w:pixel
  <br /> h:100%
  <br/> scroll:no
</div>

<div class="col e">
  <h1>E</h1>
  w:%percent
  <br /> h:100%
  <br/> scroll:no
</div>

css html
1 Answers

For this specific scenario, you can apply max-height: 100vh, position: sticky and top: 0 on all the columns besides the .c-column. max-height: 100vh assures that their height won't exceed 1 full viewport, while position: sticky lets them stay in place when scrolling. top: 0 is used as a positioning-property and will let the columns (besides .c) stay in place immediately after you start scrolling.

You can use whatever max-height- or height-value you want.

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  display: flex;
}

.col:not(.c) {
  /* display: inline-block; */
  position: relative;
  height: 100%;
  padding: 0 10px;
  max-height: 100vh;
  position: sticky;
  top: 0;
}

.a {
  background-color: #2a85ff;
  width: 20%;
}

.b {
  background-color: #83bf6e;
  width: 100px;
}

.c {
  background-color: #ff6a55;
  height: 2000px;
  flex-grow: 2;
}

.c span {
  font-weight: bolder;
}

.d {
  background-color: #8e59ff;
  width: 200px;
}

.e {
  background-color: #b5e4ca;
  width: 20%;
}
<div class="col a">
  <h1>A</h1>
  w:%percent
  <br /> h:100%
  <br/> scroll:no
</div>

<div class="col b">
  <h1>B</h1>
  w:pixel
  <br /> h:100%
  <br/> scroll:no
</div>

<div class="col c">
  <h1>C</h1>
  <span>w:remaining</span>
  <br /> h:100%
  <br/> scroll:yes
</div>

<div class="col d">
  <h1>D</h1>
  w:pixel
  <br /> h:100%
  <br/> scroll:no
</div>

<div class="col e">
  <h1>E</h1>
  w:%percent
  <br /> h:100%
  <br/> scroll:no
</div>

Sigurd Mazanti0
Related