Is it possible to achieve consistent scrollY height values across various screen sizes?

Question

Is it possible to achieve consistent scrollY height values across various screen sizes?

Looking to apply a class when a certain screen height is reached? Here's my approach:

window.onscroll = function() {scrollPost()};

function scrollPost () {
    var x = window.screen.width;
    var i = window.scrollY;
    var a = i / x;
    animator (a);
    slide(a);
}


function slide(x){

var a = (x * 100);
var i = Math.round(a);
console.log(i);
var slideIn = document.querySelector(".slide-in-right");
var slideOut = document.querySelector(".slide-out-left");

if (i >= 90){
slideOut.classList.add("animate");

slideIn.classList.add("animate");
slideIn.style.display = ("block");
    }

The issue I'm facing is that the toggle time varies on different screens due to different values. Adding multiple if statements based on screen width seems like an option, but could lead to a lot of clutter.

To solve this, I want the animation to trigger only when the container reaches 100% of the screen height. Any suggestions on how to achieve this?

javascript

Answer 1

Answer №1

To get the user's viewport (window height), simply divide it by half and add it to your IF position.
If you prefer jQuery, I had a similar answer written in that language which may provide a better output.

If you are interested in triggering a class that is only in view using waypoints, you can check out this helpful link: How to trigger a class that is only in view with wapoints

If you want to implement the solution in plain JavaScript:

First, get the user's screen height:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

Next, divide y by half, and then add it to your current position check for scrolled elements.

Here's a function to help you get the position of an element:

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };
}

For more information on getting the distance from the top for an element, you can visit: How to get the distance from the top for an element?

Answer 2

To get the user's viewport (window height), simply divide it by half and add it to your IF position.
If you prefer jQuery, I had a similar answer written in that language which may provide a better output.

If you are interested in triggering a class that is only in view using waypoints, you can check out this helpful link: How to trigger a class that is only in view with wapoints

If you want to implement the solution in plain JavaScript:

First, get the user's screen height:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

Next, divide y by half, and then add it to your current position check for scrolled elements.

Here's a function to help you get the position of an element:

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };
}

For more information on getting the distance from the top for an element, you can visit: How to get the distance from the top for an element?

Is it possible to achieve consistent scrollY height values across various screen sizes?

Answer №1

Similar questions

What steps are involved in creating a default toolbar for a material picker in a React application?

Displaying and Concealing Divisions

Issue with Website Rendering: Safari 4 exhibits display glitch showing temporary content before showing a blank white screen

Discover the method for accessing a CSS Variable declared within the `:root` selector from within a nested React functional component

JavaScript Audio working on local machine but not on server due to HTML5 compatibility issues

How to Make a Zigzag Formation in three.js?

How to dynamically change the class of an element that contains other elements using JavaScript and JQuery

Bookeo API allows only a maximum of 5 requests to be processed through Node.js

Connect radio input's value to object's key within AngularJS

React Jodit Editor experiencing focus loss with onchange event and useMemo functionality not functioning properly

Why are the $refs always empty or undefined within Vue components?

The Shopify storefront API's create cart mutation generates an HTML response when called

Do the dependencies in the devDependencies section impact the overall size of the

Displaying genuine HTML content in a React application using Algolia Instantsearch

GET method returns an empty array in the express node server

Effective ways to transmit a variable array from an HTML document to a PHP server

Incorporating a new parameter into the JSON response from SoundCloud

The Autocomplete component from MUI is alerting me to provide a unique key for every child element being passed

What is the best way to iterate through a JSON file?

The canvas element automatically removes itself after being resized within an HTML5/JavaScript environment