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

Invalid component prop provided to ButtonBase in Material UI. Ensure that the children prop is correctly rendered in this custom component

Tips for programmatically choosing images from a Google Photos collection?

React and Redux Toolkit collaborated to create a seamless shared state management system,

What is the best way to present a specific row layout using HTML and CSS?

Tips for determining the actions of a node prior to its inception

SyntaxError: Identifier was not expected

adjusting dimensions of swf file within html code

Is there a way to manually trigger a re-render of all React components on a page generated using array.map?

When viewed on a mobile device, the entire HTML document is resized to occupy less than half of the

enhancement in bringing in ... from

Horizontal SWF's are providing spaces of white in between them

Mongoose Error: The function 'mongooseSchemahere' is not recognized as a valid function

Unable to utilize ES6 syntax for injecting a service

Best practices for storing non-reactive and static data in a Vue application

Spacing between products in Woocommerce product list

Remove dynamically created elements from an AngularJS div

Exploring the concept of 'Abstract classes' within the Svelte framework

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

Struggling to generate a cookie through an express middleware

Combining react-md with material-ui components: A step-by-step guide