Unable to synchronize the scrolling of two divs

Question

Unable to synchronize the scrolling of two divs

Visit this link to view the code snippet.

I am dealing with a parent container that contains two scrollable blocks, one of which is absolutely positioned. This layout is necessary in order to create a wrapper with border-radius properties. Both blocks are guaranteed to have the same width.

.container {
  width: 400px;
  border: 1px solid #ccc;
  height: 100px;
  overflow: auto;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  white-space: nowrap;
}

.head {
  overflow: auto;
  height: 40px;
}

.container .body {
  border: 2px solid #c4c;
  position: absolute;
  border-radius: 16px;
  right: 0;
  left: 0;
  bottom: 0;
  height: 50px;
  overflow: auto;
}

<div class="container">
  <div class="head">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
  <div class="body">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
</div>

My attempt to synchronize the scrolling behavior using JavaScript resulted in flickering and did not feel like an ideal solution. I am seeking a method to make both scrollable blocks move synchronously as if they were one block, without relying on JavaScript. Is there a way to achieve this?

html css

Answer 1

Answer №1

One potential solution could be to:

implement only one overflow at the container level
handle the wrapper in the body section as a container::before element
give the wrapper a position: sticky
set the body and head with a position: absolute to position them vertically

.container {
  width: 400px;
  border: 1px solid #ccc;
  height: 100px;
  overflow: auto;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  white-space: nowrap;
  overflow: auto;
  position: relative;
}

.container::before {
  content: ' ';
  border: 2px solid #c4c;
  position: sticky;
  border-radius: 16px;
  display: block;
  left: 0;
  top: 50%;
  bottom: 0;
  height: 50%;
  width: 100%;
  z-index: 2;
}

.body, .head {
  position: absolute;
}

.body {
  top: 15%;
}

.head {
  top: 65%;
  z-index: 3;
}

<div class="container">
  <div class="head">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
  <div class="body">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
</div>

To differentiate the background of the container and wrapper, adjust the z-index to allow the body to have a greater value than the wrapper's z-index

.container {
  width: 400px;
  border: 1px solid #ccc;
  height: 100px;
  overflow: auto;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  white-space: nowrap;
  overflow: auto;
  position: relative;
  background: blue;
}

.container::before {
  content: ' ';
  border: 2px solid #c4c;
  position: sticky;
  border-radius: 16px;
  display: block;
  left: 0;
  top: 50%;
  bottom: 0;
  height: 50%;
  width: 100%;
  background: yellow;
  z-index: 2;
}

.body, .head {
  position: absolute;
}

.body {
  top: 15%;
}

.head {
  top: 65%;
  z-index: 3;
}

<div class="container">
  <div class="head">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
  <div class="body">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
</div>

Answer 2

One potential solution could be to:

implement only one overflow at the container level
handle the wrapper in the body section as a container::before element
give the wrapper a position: sticky
set the body and head with a position: absolute to position them vertically

.container {
  width: 400px;
  border: 1px solid #ccc;
  height: 100px;
  overflow: auto;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  white-space: nowrap;
  overflow: auto;
  position: relative;
}

.container::before {
  content: ' ';
  border: 2px solid #c4c;
  position: sticky;
  border-radius: 16px;
  display: block;
  left: 0;
  top: 50%;
  bottom: 0;
  height: 50%;
  width: 100%;
  z-index: 2;
}

.body, .head {
  position: absolute;
}

.body {
  top: 15%;
}

.head {
  top: 65%;
  z-index: 3;
}

<div class="container">
  <div class="head">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
  <div class="body">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
</div>

To differentiate the background of the container and wrapper, adjust the z-index to allow the body to have a greater value than the wrapper's z-index

.container {
  width: 400px;
  border: 1px solid #ccc;
  height: 100px;
  overflow: auto;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  white-space: nowrap;
  overflow: auto;
  position: relative;
  background: blue;
}

.container::before {
  content: ' ';
  border: 2px solid #c4c;
  position: sticky;
  border-radius: 16px;
  display: block;
  left: 0;
  top: 50%;
  bottom: 0;
  height: 50%;
  width: 100%;
  background: yellow;
  z-index: 2;
}

.body, .head {
  position: absolute;
}

.body {
  top: 15%;
}

.head {
  top: 65%;
  z-index: 3;
}

<div class="container">
  <div class="head">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
  <div class="body">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
</div>

Unable to synchronize the scrolling of two divs

Answer №1

Similar questions

VueD3tree successfully fetches data, however, it is not being displayed on the screen

What could be causing my table to malfunction in IE8?

The div is not showing the image as expected

Is there a way to conceal the scrollbar while still permitting scrolling?

Are CSS designers setting boundaries for their designs by restricting themselves to layouts that can be handled by CSS from the start?

What is the best way to ensure bootstrap cards' container expands horizontally?

Purge the cache of CSS and JavaScript in your browser

Resolving CSS Fluid Image Problem

Is there a way to ensure an element dynamically resizes to fill the remaining space completely?

PNG file unable to display in Google Chrome

The color of the links in the Bootstrap navbar refuses to budge

What is the process for accessing an image via localhost on the same computer?

Displaying information collected from a submission form

Adjust the text color within an input field or a text area

How can I use absolute positioning and scrolling with an Iframe?

What is the importance of ensuring that user registration is done consistently?

Showing two hyperlinks in distinct columns within a table

Create a state model template solution by utilizing the powers of HTML, CSS, and JavaScript

Choose a row at random from the table, then delete it and use it to create a new table

How can you force a line break on an inline-block element with CSS, after a specific number of elements?