Clash Royale CLAN TAG

How can you increment a number on scroll without having the scrollbar(actually scrolling)?

So, imagine 2 sections/divs (both with width: 100% and height: 100%). I only see the first section, the second section is to the right side of the screen, unable to be seen(overflow: hidden; on the body).

width: 100%

height: 100%

Now, when I scroll, I want that second section to appear gradually, with each pixel I'm "scrolling".

But, the problem here is, I can't actually scroll, thus properties such as this: window.pageYOffset, element.getBoundingClientRect() do not work. Basically, I want to increment a number each time I do a scrolling gesture, so I can assign that number to the second section( to modify its left property so it can come in the viewport ). And I don't know how to increment the number.

window.pageYOffset

element.getBoundingClientRect()

This is a recreation of what I'm trying to accomplish:

var secondSection = document.getElementsByClassName("second-section")[0];



function leftTransition(){
/*secondSection.style.left = number to be incremented + "px";*/
}

document.addEventListener("scroll", leftTransition);

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.first-section, .second-section {
width: 100%;
height: 100%;
}

.second-section {
position: absolute;
top: 0;
left: 100%;
background-color: blue;
}

<div class="first-section">
content
content
</div>

<div class="second-section">
content
content
</div>

wheel

wheel

1 Answer
1

If you go for the wheel event, something like this might resemble what you're trying to do.
You can then remove the event handler once the page is as much in view as you want.

wheel

var secondSection = document.getElementsByClassName("second-section")[0];
function leftTransition( event ){
var offset = event.deltaY;
var left = offset < 0
? ( parseInt( secondSection.style.left ) + 1 ) + '%'
: ( parseInt( secondSection.style.left ) - 1 ) + '%';
secondSection.style.left = left;
}
window.addEventListener("wheel", leftTransition);

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.first-section, .second-section {
width: 100%;
height: 100%;
background-color: steelblue;
}
.second-section {
position: absolute;
top: 0;
background-color: blue;
}

<div class="first-section">content content</div>
<div class="second-section" style="left: 100%">content content</div>

event.deltaY

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.