0

I am trying to achieve scroll as in this page https://docs.docker.com/engine/. Notice that the central container scrolls along with the page scrollbar, keeping the links containers on left and right fixed. After the scroll reaches the bottom of the container the rest of the page is scrolled to show the footer. So far I have tried put overflow:auto on the central container and the outer container. I have hidden the scrollbar for central container and only the scrollbar for outer container(which is the page) is shown. So I am able to scroll the page and also central container separately. I want to scroll the central container when the page is scrolled and when the scroll reaches the bottom of the central container, I want to scroll the rest of the page(which has footer etc.)

<div class="main_page">
   <div class="header"></div>
   <div class="main">
      <div class="left_navigation"></div>
      <div class="main_content"></div>
      <div class="right_navigation"></div>
   </div>
   <div class="footer"></div>
</div>

So I have to keep the header, left_navigation and right_navigation fixed and scroll only the main_content. After the scroll reaches bottom of main_content, the rest of the page should scroll, so that header, left_navigation, right_navigation and main_content move up and the footer is shown. I am using plain javascript without any jquery.

Siva Bathula
  • 746
  • 1
  • 8
  • 19

3 Answers3

1

You can just use sticky position like the example page you mentioned

Just add one more container inside your left_navigation container and play with heights

working exc below:

<style>
.header {
    height: 50px;
    background: #00BCD4;
}
.footer {
    background: #673AB7;
    height: 250px;
}
.main {
    display: flex;
    flex: 1;
}
.left_navigation {
    background: #3F51B5;
    flex: 1;
}
.main_content {
    background: #03A9F4;
    flex: 1;
}
.right_navigation {
    background: #2196F3;
    flex: 1;
}
.inner-left-nav {
    position: sticky;
    top: 0;
    height: auto;
    max-height: 100%;
}
</style>
<div class="main_page">
   <div class="header">header</div>
   <div class="main">
      <div class="left_navigation">
        <div class="inner-left-nav">
            left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
          left nav<br>
        </div>
      </div>
      <div class="main_content">
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
        <p>main content here main content here main content here main content here 
        main content here main content here main content here main content here </p>
      </div>
      <div class="right_navigation">right nav</div>
   </div>
   <div class="footer"></div>
</div>
kaize
  • 793
  • 1
  • 9
  • 17
1

It can be by wrapping the right nav and adding position: sticky.

Further reading:

.main-page {
  position: relative;
}

.header {
  height: 60px;
  background: #00BCD4;
}

.main {
  display: flex;
}

.main_content {
  background: #03A9F4;
  height: 100vh;
}

.right_navigation {
  position: absolute;
  right: 0;
  height: 100vh;
}

.inner-right-nav {
  position: sticky;
  top: 0;
  height: 50vh;
  width: 50vw;
  background: #3F51B5;
}

.footer {
  background: #673AB7;
  height: 100vh;
}
<div class="main-page">
  <div class="header">header</div>
  <div class="main">
    <div class="main_content">
      <p>main content here main content here main content here main content here main content here main content here main content here main content here </p>
    </div>
    <div class="right_navigation">
      <div class="inner-right-nav">
        left nav
      </div>
    </div>
  </div>
  <div class="footer">footer</div>
</div>
benhatsor
  • 1,863
  • 6
  • 20
0

I think you need to use the overscroll-behaviour CSS property.

By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

Chong Lip Phang
  • 8,755
  • 5
  • 65
  • 100