Creating two separate divs that can scroll independently while also limiting each other's scroll depth can be achieved by utilizing

Question

Creating two separate divs that can scroll independently while also limiting each other's scroll depth can be achieved by utilizing

I am attempting to replicate the unique scrolling feature seen on this particular page.

Essentially, there are two columns above the fold that can be scrolled independently, but I want their scroll depths to be linked. When a certain depth is reached while scrolling on #scrollOne, I want #scrollTwo to move up to a specific point and then stop scrolling.

My layout consists of two divs inside a grid container:

<div class="container">
   <div id="scrollOne" class="scrollable">{....content....}</div>
   <div id="scrollTwo" class="scrollable">{....content....}</div>
</div>
<div>....other content below...</div>

In addition, here is the relevant CSS code:

.container {
  overflow: hidden;
}
.scrollable {
  overflow-y: scroll;
  height: 75vh;
  scrollbar-width: none;
}

Everything is functioning correctly except for the synchronization between the two divs during scrolling. Any assistance or suggestions would be highly valued.

javascript html css

Answer 1

Answer №1

To implement a sticky position, you can follow this code snippet.

*{
  padding: 0px; margin: 0px; font-family: sans-serif; box-sizing: border-box;
}
.container {
  position: relative;
}
section, aside{
  display: inline-block;
  float: left;
  padding: 20px;
}
section{
  width: 60%;
  border-right: 1px solid #afafaf;
}
aside{
  margin-top: 100px;
  position: -webkit-sticky;
  position: sticky;
  border-bottom: 1px solid #afafaf;
  top: 0px;
  width: 40%;
}
.clear-prefix {
    content: '';
    display: block;
    clear: both;
}

<div class="container">
 <section>
  <p>Lorem Ipsum is simply dummy text... [content continues]
 </section>
 <aside>Aside</aside>
 <div class="clear-prefix"></div>
</div>

Answer 2

To implement a sticky position, you can follow this code snippet.

*{
  padding: 0px; margin: 0px; font-family: sans-serif; box-sizing: border-box;
}
.container {
  position: relative;
}
section, aside{
  display: inline-block;
  float: left;
  padding: 20px;
}
section{
  width: 60%;
  border-right: 1px solid #afafaf;
}
aside{
  margin-top: 100px;
  position: -webkit-sticky;
  position: sticky;
  border-bottom: 1px solid #afafaf;
  top: 0px;
  width: 40%;
}
.clear-prefix {
    content: '';
    display: block;
    clear: both;
}

<div class="container">
 <section>
  <p>Lorem Ipsum is simply dummy text... [content continues]
 </section>
 <aside>Aside</aside>
 <div class="clear-prefix"></div>
</div>

Creating two separate divs that can scroll independently while also limiting each other's scroll depth can be achieved by utilizing

Answer №1

Similar questions

Formatting ternary expressions in VueJS

The issue at hand is why the closure is not functioning properly when variables are assigned to the callback of the getCurrentLocation function

CSS: Centralize content and use a div to hide images that overflow the container

Invalid Resize Argument Causes Background to Not Appear on IE Browser

Having trouble with Silverlight running JavaScript?

Retrieve and dynamically load an entire webpage using AJAX

Why isn't Sequence.js Slider automatically playing?

exploring the similarities between arrays containing nested objects

The application experiences a sudden failure when Mongoose is unable to locate the specified item

A step-by-step guide on retrieving information from Material UI components and incorporating an onSubmit feature to transmit data to the backend server

Tips for centering a list using flexbox technique

Tips for choosing a nested element within a div using CSS

Error: JSONP Label Validation Failed

Switch up the sequence of selected/appended SVGs in D3

Material UI drop down select position placement

The issue arises when the ng-hide directive fails to function properly due to the presence of a custom directive with the terminal option

Converting dynamic content within a div into an interactive link

Customizing the width of the JQuery $ui.progressbar by overriding its properties

Exploring the Functionality of Bootstrap 5 Collapse Component with VueJS 2

React Native application fails to return any values from an asynchronous operation in App function