What is the process of enabling scrolling on the main panel once scrolling on the sidebar has concluded?

Question

What is the process of enabling scrolling on the main panel once scrolling on the sidebar has concluded?

How can I achieve a scrolling behavior similar to the one demonstrated here? When scrolling through the sidebar, I want it to continue scrolling until it reaches the end. After that, any further scrolling on the sidebar should scroll the main panel instead. Here is the code snippet I am currently using:

<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>

javascript html css scroll

Answer 1

Answer №1

The simple functionality of a typical browser involves scrolling the element beneath the cursor, and when it reaches its maximum limit, the event is propagated up to the Document Object Model (DOM).

To achieve the desired outcome, it is essential to position the sidebar within the main content so that both elements can be scrolled simultaneously.

By incorporating the sidebar within the body of the document, as demonstrated in your W3C example, you can observe the desired behavior where both the sidebar and body scroll together seamlessly.

Answer 2

The simple functionality of a typical browser involves scrolling the element beneath the cursor, and when it reaches its maximum limit, the event is propagated up to the Document Object Model (DOM).

To achieve the desired outcome, it is essential to position the sidebar within the main content so that both elements can be scrolled simultaneously.

By incorporating the sidebar within the body of the document, as demonstrated in your W3C example, you can observe the desired behavior where both the sidebar and body scroll together seamlessly.

Answer 3

Answer №2

Consider implementing a fixed sidebar feature, where as you scroll down the sidebar remains in place while the main content moves up or down. Below is a basic example to illustrate:

* {
  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>

Answer 4

Consider implementing a fixed sidebar feature, where as you scroll down the sidebar remains in place while the main content moves up or down. Below is a basic example to illustrate:

* {
  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>

Answer 5

Answer №3

To accomplish this in the specified configuration, you can implement a small piece of JavaScript code that will assist you:

const sidebar = document.getElementById('col-1');

const container = document.getElementById('col-2');

sidebar.addEventListener('wheel', (event) => {
  const { target } = event;
  
  const { scrollHeight, scrollTop, clientHeight } = sidebar;
  
  if (scrollTop + clientHeight === scrollHeight) {
    //scrolledDown
    container.scrollTop += 20
  }
  
  if(scrollTop === 0) {
    //scrolledUp
    container.scrollTop -= 20
  }
})

Answer 6

To accomplish this in the specified configuration, you can implement a small piece of JavaScript code that will assist you:

const sidebar = document.getElementById('col-1');

const container = document.getElementById('col-2');

sidebar.addEventListener('wheel', (event) => {
  const { target } = event;
  
  const { scrollHeight, scrollTop, clientHeight } = sidebar;
  
  if (scrollTop + clientHeight === scrollHeight) {
    //scrolledDown
    container.scrollTop += 20
  }
  
  if(scrollTop === 0) {
    //scrolledUp
    container.scrollTop -= 20
  }
})

What is the process of enabling scrolling on the main panel once scrolling on the sidebar has concluded?

Answer №1

Answer №2

Answer №3

Similar questions

Ways to invoke a controller function from a window listener function

Leverage shared techniques and libraries across two different projects

Components from Bower are currently not available

Utilizing AngularJS to filter prices within a specific range using a button

Purchase Masonry Supplies for Optimal Arrangement

Supplying information to my ejs template while redirecting

Which is better for toggling between images/icons: a switch statement or a ternary operator?

Using Javascript to deactivate a clickable image upon clicking another image

I can't understand why my body width is so disproportionately larger than usual

When refreshing a page in Next.js, the loading indicator does not properly turn off

Verifying the format of an object received from an HTTP service using a TypeScript interface

Performing a Javascript ajax post of a canvas snapshot in "image/jpeg" format to an asp.net web form

Show the text from the chosen option using jQuery with a button

Place the element at the bottom of the row above

Identifying and handling the removal of a complete div element by the user

Update Jquery Dialog's Button After Making an Ajax Request

Transform the object into JSON while excluding specific (private) attributes

How can I effectively monitor and track modifications to a document's properties in MongoDB?

Manage text, PDF, and image files in a MEAN stack app by uploading and fetching them from a MongoDB database using

How to utilize DefinePlugin in Webpack to pass NODE_ENV value