Question 195970 in Html Question posted in
Some basic documentation can be found here.

Html – How to activate scroll on main panel after scroll on sidebar is complete?

I am trying to replicate the scrolling behavior like this.
When you scroll the sidebar, it keeps scrolling until it reaches the end. Then any further scrolling on the sidebar is actually scrolled on the main panel. I have the following code:

<div className='wrapper'>
        <div className='sidebar'>My sidebar</div>
        <div className='main-panel'>
          //this is the main panel content on which overflow y scroll is enabled
          <div className='row'>
            <div className='col-md-8' id='col-1'>
              This is the column content I want to scroll when end
              of my scroll content of col-2 is reached
            </div>
            <div className='col-md-4' id='col-2'>
              This is the column which when scrolled to the end
              will then scroll col-1
            </div>
          </div>
        </div>
      </div>
Tags:

2

Answers


  1. 0

    The basic browser behavior is very simple. Scroll the element under the cursor, if it’s at maximum then bubble the event up the DOM.

    So the only thing you should do is put the sidebar in the main content. That way both will scroll.

    You that W3C example you gave, the sidebar and the document body scroll. Since the sidebar is included in the body, the behavior you want works.

    Login or Signup to reply.
  2. 0

    Suggest using fixed sidebar, so when you scroll down your sidebar, the main content will start to scroll (up or down). There you have simple example:

    * {
  box-sizing: border-box;
}

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

.sidebar {
  height: 100%;
  width: 300px;
  position: fixed;
  left: 0;
  overflow-y: auto;
}

.content {
  height: 1000px;
}
    <div class="sidebar">
  <div class="content">
    
  </div>
</div>

<div class="content"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search