Synchronizing the scrolling of two elements with varying heights: A guide

Question

Synchronizing the scrolling of two elements with varying heights: A guide

There are two DIV elements in question: #page and #block :

<div id="page"></div>
<div id="block"></div>

The #block element has a fixed position and contains long content with the property overflow:hidden.

The #page element also contains some content, but its height may be longer or shorter than that of the #block element.

The goal is to achieve synchronized scrolling between these two elements. Something similar to this:

To synchronize the scroll between the header and footer elements of the #page and #block, we need to calculate the speed at which the #block element scrolls.

This is how I attempted to accomplish this:

Calculated the height of the #page element
Calculated the height of the content within the #block element (since it has a fixed height)
Calculated the scroll speed of the #block element using:
```
$("#block").outerHeight / $("#page").outerHeight
```
Triggered the .scrollTop() of the #block element

Initially, it worked as intended, with the #block element scrolling faster than the #page element. However, towards the end, the #block element did not fully scroll.

Here is the JsFiddle link demonstrating the issue: http://jsfiddle.net/zur4ik/bQYrf/2/

If anyone can pinpoint what I might be doing wrong, I would greatly appreciate it. Thank you in advance.

javascript jquery html css

Answer 1

Answer №1

It is important to consider the window height and subtract it from the heights of the elements.

$(window).scroll(function() {
    var pageH = $('#page').height() - $(this).height();
    var pageT = this.scrollY - $('#page').offset().top;

    $('#block').scrollTop(pageT / pageH * ($('#blockLength').height() - $(this).height()));
});

Check out the latest fiddle here: http://jsfiddle.net/bQYrf/4/

Answer 2

It is important to consider the window height and subtract it from the heights of the elements.

$(window).scroll(function() {
    var pageH = $('#page').height() - $(this).height();
    var pageT = this.scrollY - $('#page').offset().top;

    $('#block').scrollTop(pageT / pageH * ($('#blockLength').height() - $(this).height()));
});

Check out the latest fiddle here: http://jsfiddle.net/bQYrf/4/

Answer 3

Answer №2

I came across two helpful resources on Stack Overflow that address this very question:

Based on my understanding of your question, this is the perfect solution for you: Synchronized scrolling using jQuery?

Another effective approach can be found here as well: How do I synchronize the scroll position of two divs?

Answer 4

I came across two helpful resources on Stack Overflow that address this very question:

Based on my understanding of your question, this is the perfect solution for you: Synchronized scrolling using jQuery?

Another effective approach can be found here as well: How do I synchronize the scroll position of two divs?

Answer 5

Answer №3

function calculateViewportHeight()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

var viewportHeight = calculateViewportHeight();

$(window).scroll(function() {

    var difference = ($("#containerSize").height() - viewportHeight) / ($("#mainContent").height() - viewportHeight);
    var positionToSet = $(window).scrollTop() * difference;

    $("#element").scrollTop(positionToSet);

    console.log("Updated scroll position");

});

http://example.com/code-example

Answer 6

function calculateViewportHeight()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

var viewportHeight = calculateViewportHeight();

$(window).scroll(function() {

    var difference = ($("#containerSize").height() - viewportHeight) / ($("#mainContent").height() - viewportHeight);
    var positionToSet = $(window).scrollTop() * difference;

    $("#element").scrollTop(positionToSet);

    console.log("Updated scroll position");

});

http://example.com/code-example

Synchronizing the scrolling of two elements with varying heights: A guide

Answer №1

Check out the latest fiddle here: http://jsfiddle.net/bQYrf/4/

Answer №2

Answer №3

Similar questions

Tips on modifying the style of a specific React component without affecting the others

Iterate using jQuery through all child div elements

Fetching information from the server in response to the data transmitted from the client

The error message "Next.js 14 does not recognize res.status as a function"

assigning a numerical value to a variable

Unable to use Office.context.mailbox.item.displayReplyAllForm with attachments on outlook.live.com as well as receiving internal server errors when using the Outlook API

Ways to prevent a background image from repeating in an HTML email without relying on CSS

Creating a personalized JavaScript clock based on a specific time

The iframe is not adjusting its size in relation to the parent window

Error in Express application due to uncaught SyntaxError

Node.js allows you to seamlessly upload multiple images from various form fields or input types simultaneously

Is there a solution for the continuous automatic incrementing of the jQuery UI spinner that occurs when I right-click on it?

What is the fallback mechanism in Astro js when the cache is unavailable?

Difficulty rendering wireframe with Three.js MeshBasicMaterial

Understanding how events propagate in three.js

Utilizing NPM packages within Grunt-powered workflows

Deciphering text using XQuery and <a> elements

What are the best techniques for styling a SELECT box with HTML and CSS?

Retrieving data from Google Places API in JSON format

Utilizing JavaScript, create a dynamic grid gallery with Div Spin and expand functionality