How can I set the same value to vars but run them seperately in different functions?

Question

So in my project, I currently have 2 sections.

Section 1 as it is reached, the page has to stick to top and scroll from left to right

Section 2 as it is reached, the page has to stick to top and scroll from right to left

this is my current function I am running.

var windowWidth = window.innerWidth;

var horLength = document.querySelector(".element-wrapper").scrollWidth;
var horLength2 = document.querySelector(".element-wrapper2").scrollWidth;

var distFromTop = document.querySelector(".horizontal-section").offsetTop;
var distFromTop2 = document.querySelector(".horizontal-section2").offsetTop;

var scrollDistance = distFromTop + horLength - windowWidth;
var scrollDistance2 = distFromTop2 + horLength2 - windowWidth;

document.querySelector(".horizontal-section").style.height = horLength + "px";
document.querySelector(".horizontal-section2").style.height = horLength2 + "px";

window.onscroll = function() {
    var scrollTop = window.pageYOffset;
    var scrollTop2 = window.pageYOffset;

    if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
        document.querySelector(".element-wrapper").style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)";
    }
    if (scrollTop2 >= distFromTop2 && scrollTop2 <= scrollDistance2) {
        document.querySelector(".element-wrapper2").style.transform = "translateX(" + (scrollTop2 - distFromTop2) + "px)";
    }
}

Now section 1 works perfectly and scrolls from left to right as I want it to do.

But section 2 has the same var value set window.pageYOffset and is getting overriden by the value of var scrollTop, I know thats what is causing the issue, but how can I perhaps reverse the Y offset value for it to not run my scrollTop2 with the scrollTop while its running the first function for section 1?

If I were to delete section 1 from my code, section 2 runs perfectly fine but if I run them together, section 2 is overriden by section 1.

Answer 1

There are two ways to do what you want to do:

1. You can apply styling to your section 2 like:

div class="element-wrapper2 horizontal-section2" style="overflow-x: auto; direction:rtl;"

2. By setting attribute in javascript:

document.querySelector('.horizontal-section2').setAttribute('dir', 'rtl');

I hope this helps in fixing your issue.

@RandomCoder As per our conversation below and my understanding please find below code snippet for reference, I hope this helps:

<div>
    <div class="elementwrapper horizontalsection" style="overflow:auto;height:auto">
        <table id="1" class="table table-hover table-striped table-bordered" style="min-width:5000px;overflow:auto">

            <thead>
                <tr>
                    <th>Proposal Number</th>
                    <th>UW Case Number</th>
                    <th>Company Name</th>
                    <th>UW Case Status</th>
                    <th>Client Confirmation</th>
                    <th>Confirmation Date</th>
                    <th>Proposal Number</th>
                    <th>UW Case Number</th>
                    <th>Company Name</th>
                    <th>UW Case Status</th>
                    <th>Client Confirmation</th>
                    <th>Confirmation Date</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<div>
    <div class="elementwrapper2 horizontalsection2" style="overflow:auto; height:auto">
        <table id="2" class="table table-hover table-striped table-bordered" style="min-width:5000px;overflow:auto">

            <thead>
                <tr>
                    <th>Proposal Number</th>
                    <th>UW Case Number</th>
                    <th>Company Name</th>
                    <th>UW Case Status</th>
                    <th>Client Confirmation</th>
                    <th>Confirmation Date</th>
                    <th>Proposal Number</th>
                    <th>UW Case Number</th>
                    <th>Company Name</th>
                    <th>UW Case Status</th>
                    <th>Client Confirmation</th>
                    <th>Confirmation Date</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

$(document).ready(function () {
        var windowWidth = window.innerWidth;

        var horLength = document.querySelector(".elementwrapper").scrollWidth;
        var horLength2 = document.querySelector(".elementwrapper2").scrollWidth;

        var distFromTop = document.querySelector(".horizontalsection").offsetTop;
        var distFromTop2 = document.querySelector(".horizontalsection2").offsetTop;

        var scrollDistance = distFromTop + horLength - windowWidth;
        var scrollDistance2 = distFromTop2 + horLength2 - windowWidth;

        document.querySelector(".horizontalsection").style.height = horLength + "px";
        document.querySelector(".horizontalsection2").style.height = horLength2 + "px";

        document.querySelector('.horizontalsection2').setAttribute('dir', 'rtl');

        window.onscroll = function () {
            var scrollTop = window.pageYOffset;
            var scrollTop2 = window.pageYOffset;

            if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
                document.querySelector(".elementwrapper").style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)";
            }
            if (scrollTop2 >= distFromTop2 && scrollTop2 <= scrollDistance2) {
                document.querySelector(".elementwrapper2").style.transform = "translateX(" + (scrollTop2 - distFromTop2) + "px)";
            }
        }

    });

Answer 2

I would suggest add second class to your elements.what do i mean by that.OK.

currently you are getting your elements with:

=>document.querySelector(".element-wrapper").scrollWidth;

=>document.querySelector(".element-wrapper2").scrollWidth;

because your html may be: <div class="element-wrapper"></div> <div class="element-wrapper2"></div>

what i want you to do:

<div class="element-wrapper one"></div> <div class="element-wrapper two"></div> means they have two classes .element-wrapper for both and one & two which makes them different from eachother.second class is given followed by a space after the first class.

now i get my elements with js same procedure with new class names.

=>document.querySelector(".element-wrapper one").scrollWidth;

=>document.querySelector(".element-wrapper two").scrollWidth;

Now function():

First the same if condition that you had previously set on it.

Second If condition is what i added & it says:

document.querySelector(".element-wrapper").classList.contains(one))

basically what i am saying query an element with class of .element-wrapper but js doesn't know which one is it .then i say classList.contains(one)that means:

If=>query an element with class.element-wrapper & contains class of one

do this////

else if=>query an element with class .element-wrapper & contains class of two

do this////

I hope I make sense. if you have any question please let me know

var windowWidth = window.innerWidth;

var horLength = document.querySelector(".element-wrapper one").scrollWidth;
var horLength2 = document.querySelector(".element-wrapper two").scrollWidth;

var distFromTop = document.querySelector(".horizontal-section").offsetTop;
var distFromTop2 = document.querySelector(".horizontal-section2").offsetTop;

var scrollDistance = distFromTop + horLength - windowWidth;
var scrollDistance2 = distFromTop2 + horLength2 - windowWidth;

document.querySelector(".horizontal-section").style.height = horLength + "px";
document.querySelector(".horizontal-section2").style.height = horLength2 + "px";

window.onscroll = function() {
  var scrollTop = window.pageYOffset;
  /*var scrollTop2 = window.pageYOffset;*/

  if (scrollTop >= distFromTop && scrollTop <= scrollDistance) {
    if (document.querySelector(".element-wrapper").classList.contains(one)) {
      document.querySelector(".element-wrapper").style.transform = "translateX(-" + (scrollTop - distFromTop) + "px)";
    } else if (document.querySelector(".element-wrapper").classList.contains(two)) {
      document.querySelector(".element-wrapper").style.transform = "translateX(" + (scrollTop2 - distFromTop2) + "px)";
    }

  }

}

<div class="element-wrapper one">
</div>
<div class="element-wrapper two">
</div>