Currently, I am working on a website where I want to display large text on the screen and have the ability to scroll two divs simultaneously. This functionality is already in place. I can scroll the divs, but I'm facing an issue with the jumps being too big on the #back div. The jumps seem to match the window's height (you may need to view the snippet in full-screen mode to fully grasp what I mean).
UPDATE: After testing with a friend, it seems that the problem only occurs in Firefox on Windows. It works fine on Mac and Linux. Here is a fiddle with increased height for reference
I've included two gifs to demonstrate the strange effect. Each page movement equals one scrollwheel down on my mouse (works fine with trackpad as well since it's not related to the mouse wheel). https://i.sstatic.net/bxJap.gif
On the other hand, when I remove one of the overflow in my CSS, the following black square stops functioning properly, but the scrolling returns to normal:
https://i.sstatic.net/G4Ait.gif
IMPORTANT EDIT: The issue appears to be specific to Firefox, as it functions correctly in Chrome and Brave browsers. I am actively searching for a solution to make it work seamlessly across all platforms.
I noticed that the problem arises when I set two overflows in the CSS. If I remove one, the script breaks, but the scrolling issue also disappears. Here is an example showcasing the bug:
let back_innerHeight = $("#back").height()
let back_scrollHeight = document.querySelector("#back").scrollHeight
let front_innerHeight = $("#front").innerHeight()
let front_scrollHeight = $("#front")[0].scrollHeight
$("#back").on("scroll", function () {
// Get how many pixels were scrolled on #back
let back_scrolled = $(this).scrollTop()
// Calculate the scrolled percentage
let percentage_back = back_scrolled / (back_scrollHeight - back_innerHeight)
// Calculate how many pixels to scroll on #front
let scrollIT = (percentage_back * (front_scrollHeight - front_innerHeight))
// Just to validate that the percentage is applied correctly...
let percentage_front = scrollIT / (front_scrollHeight - front_innerHeight)
// Apply the scroll
$("#front").scrollTop(scrollIT);
});
window.onresize = function(){
back_innerHeight = $("#back").height()
back_scrollHeight = document.querySelector("#back").scrollHeight
front_innerHeight = $("#front").innerHeight()
front_scrollHeight = $("#front")[0].scrollHeight
}.scroll {
position: absolute;
display: block;
top: 0;
height: 100%;
}
#front {
overflow: hidden;
position: absolute;
background-color: black;
color: white;
right: 0;
left: 0;
bottom: 0;
top: 0;
margin: auto auto auto auto;
width: 25%;
height: 35%;
font-size: 3rem;
}
#back {
overflow: auto;
font-size: 8rem;
}
p {
margin: 0;
padding: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="scroll" id="back">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, quam similique quibusdam libero voluptatum laboriosam, sunt possimus non nobis recusandae, excepturi ex voluptates! Neque veniam, sapiente magnam fuga unde autem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur consectetur laudantium voluptatibus, iusto molestiae fugit inventore rerum, sit sed dolor ratione perferendis beatae molestias. Asperiores odio mollitia quisquam voluptates.</p>
</div>
<div class ="scroll" id="front">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, quam similique quibusdam libero voluptatum laboriosam, sunt possimus non nobis recusandae, excepturi ex voluptates! Neque veniam, sapiente magnam fuga unde autem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur consectetur laudantium voluptatibus, iusto molestiae fugit inventore rerum, sit sed dolor ratione perferendis beatae molestias. Asperiores odio mollitia quisquam voluptates.</p>
</div>