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

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.

CodePudding user response：

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

You can apply styling to your section 2 like:

div style="overflow-x: auto; direction:rtl;"

By setting attribute in javascript:

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

I hope this helps in fixing your issue.

CodePudding user response：

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 ></div> <div ></div>

what i want you to do:

<div ></div> <div ></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 >
</div>
<div >
</div>