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

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

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 №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
  }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The two items are not situated side by side

Trying to make my page responsive, but when I inspect and look into mobile view, the elements do not align next to each other like they do on desktop. https://i.sstatic.net/8WhxD.png I want the shopping cart icon and button to be positioned next to each o ...

htmlcssbootstrap-5

What is the alternative to using this.$parent.$emit in Vue 3?

Recently, my application has been upgraded to Vue 3. Following the migration, my linter flagged a deprecation error that is documented at this link: . The documentation provides guidance on replacing this.$emit with the mitt library, however, it does not ...

javascriptvue.jsmigrationlintervuejs3

Is it possible that my PHP script will not accept my POST request if I initially

Recently, I developed a dynamic signature generator for my online game. To create your own signature, you can manually access it via I attempted to simplify the process by creating a userbox where users don't have to visit and edit it. My goa ...

phphtmldynamic

What is the best way to define file paths in a webpage to ensure that the same file works seamlessly on both server and

Currently, I am working on developing a website locally with the intention of later transferring it via FTP to my server. In my index.php file, there is a line that reads: <?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/header.php");?&g ...

javascriptphphtmlcss

Tips for utilizing comment tags efficiently

I have encountered an issue with IE7 where my CSS is not functioning properly. In an attempt to target IE7 and lower versions specifically, I inserted IE comment tags into the HTML code. However, despite my efforts, it does not seem to be effective. Initia ...

htmlcssinternet-explorer

A guide on adding two fields together in AngularJS and displaying the output in a label

I am facing a unique issue on my webpage. Including two inputs and a label in the page, I want the label to display the sum of the values entered into these two inputs. My initial attempt was as follows: Sub-Total <input type="text" ng-model="Propert ...

javascripthtmlangularjssum

Retrieving raw PCM data from webAudio / mozAudio APIs

I have been exploring ways to store the output from the webAudio API for future reference. It seems that capturing PCM data and saving it as a file might meet my needs. I am curious to know if the webAudio or mozAudio APIs have built-in functionality for ...

javascripthtmlweb-audio-api

What is the best way to establish a connection between the same port on Expressjs and Socket.io

I am currently using Express.js and Socket.io to develop a chat application. Initially, I created my project with Express-Generator and began by running the node ./bin/www script. However, I decided to remove the ./bin/www file and instead combined it wit ...

javascriptnode.jsexpresssocket.io

Identify matching values in objects and dynamically update them with a custom value

I have an array structured like this: var array = [ { dates: "2020-12-25", class: "first" }, { dates: "2020-12-26", class: "last" }, { dates: "2021-06-11", class: "first" }, ...

javascriptjqueryajax

Javascript Promise: managing the flow of execution

There are a series of tasks that I need to accomplish using an API. It's crucial that these functions are executed sequentially. Each of the functions mentioned below returns a valid promise. a(analyticsConfig._listConfig) .then(function() { ...

javascriptpromisechaining

Maintaining the relative position of an SVG while scaling within a div element

I am in the process of incorporating my custom SVG knob icons into an electron application using flexbox. The challenge lies in keeping them centered within the rectangle icon regardless of browser size, as shown here. Ideally, the icons should adjust thei ...

htmlcsssvgelectronscaling

When attempting to transmit data to the server, an error message pops up in the DevTools console of the browser. The error is displayed as "Network Error at create

I am currently utilizing React JS for the front end of my web application and PHP for the back end. When I try to send data to the server upon clicking a button on the webpage, I encounter the following error: Network Error at createError (createError.js:1 ...

phphtmlreactjsaxios

What is the best way to eliminate the scroll buttons from a scroll bar within a scrollPane in JavaFX?

Here's a snippet of code from the CSS file: .scroll-bar .button { visibility: hidden; -fx-background-color: black; } Despite this code, the scroll bar buttons are unaffected. You can see an image of the issue here. I would greatly appreciate any hin ...

javacssjavafx

Should I consider using an UI framework when initiating a React project?

I'm embarking on a new website project and I'm contemplating whether using a React UI Framework is the way to go, or if I should create my own components and grid system from scratch. I've been drawn to projects like ElementalUI's take ...

cssuser-interfacereactjsmaterial-ui

Adjust the angle and trim an image on one side

Can someone assist with making an image appear like this: I'm attempting to achieve this look using CSS: I've experimented with skewing but the red area persists, regardless of the degree value used. Here is my basic structure: <div class= ...

htmlcsstransform

Having trouble retrieving data from a JSON object that has been stringified. This issue is arising in my project that utilizes Quasar

I successfully converted an excel spreadsheet into a JSON object by using the xml2js parseString() method, followed by JSON.stringify to format the result. After reviewing the data in the console, it appears that I should be able to easily iterate through ...

javascriptarraysjsonvue.jsxml2js

Tips for arranging elements in proper order following a rotation

Having trouble aligning rotated divs? Let's say we rotate .straight by 30deg, and now we want to find the new offset coordinates of its bottom right corner. This way, we can perfectly match up the bottom left corners of .curve with this new coordinate ...

javascriptjquerycssmathrotation

Is there a way to retrieve all CSS styles associated with a specific element?

When I come across a site element that I really like and want to incorporate into my own site, what is a simple way to do so? It can be challenging to navigate through numerous CSS files to find all the necessary styles. ...

htmlcss

Arranging a flex item below another flex item within a flexbox container

Is there a way to use flexbox to ensure that the 2.5 element is placed below the 2 element instead of beside it on the same row within the flex container? Given the HTML provided, how can I achieve this layout using flexbox? I attempted to accomplish thi ...

htmlcssflexbox

Collapse all "Read More" buttons simultaneously using Bootstrap

I am attempting to design a segment that contains multiple paragraphs that can be expanded or collapsed individually. How can I achieve this using only pure bootstrap css so that they do not all expand and collapse simultaneously? #summary { font-size: ...

htmlcsstwitter-bootstrapbootstrap-4