Discovering the window.scrollTop, ScrollY, or any other distance value while utilizing CSS scroll snap can be achieved by following these

I am currently utilizing css scroll snap for smooth scrolling through sections that are 100vh in height. The functionality of the scroll snap is quite impressive.

However, I need to find a way to determine the exact distance the user has scrolled down the page for various purposes.

I have attempted different methods such as:

let wrapper = document.getElementById('landing-page-wrapper');
console.log(wrapper.offsetTop);
console.log(window.scrollY);

In addition, I also experimented with window.scrollTop, wrapper.scrollTop, and other options but haven't found a satisfactory solution.

You can view a demonstration of what I am encountering on Codepen

If you have any insights or suggestions on how to track the scroll distance while using 100vh sections and css scroll-snap, please let me know.

Thanks in advance!

javascriptcssscroll-snap

Answer №1

After analyzing the code you provided, it appears that the reason why window.onscroll is not functioning as intended is because neither window nor document.body are experiencing vertical overflow. The scroll event will only be triggered by the element that is overflowing, which in this case happens to be the element targeted by the .box-wrapper selector.

As a result, listening for the scroll event on that specific element will allow you to access its vertical scroll position using event.currentTarget.scrollTop:

document.querySelector(".box-wrapper").addEventListener("scroll", (e) => {
  console.log(e.currentTarget.scrollTop);
});

Take a look at the proof-of-concept example below:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing HTMX with just one HTML page: A step-by-step guide

Just starting out with HTMX and created a sample: <!DOCTYPE html> <html> <head> </head> <body> <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfema ...

javascriptajaxhtmx

When using Node.js, you may encounter the error message: "TypeError: brevo.ApiClient is not a constructor

My goal is to set up an automatic email sending system that, upon receiving details like name and email, will send a confirmation email to the provided email address with the message "subscribed." I've been working on this task for about 7 hours strai ...

javascriptnode.jsnpmbackendnodemailer

Can you identify the distinctions between these two lines?

As a beginner in React, I recently learned how to create a timer counter following a tutorial. However, I am slightly confused about the difference between these two lines of code. Can someone please explain what is occurring in the first line below? lin ...

javascriptreactjs

Utilizing Node.js Express' put method for uploading files

Currently, I am attempting to complete a file upload using XMLHttpRequest. The process involves splitting the file into chunks of 10KB each. On the server side, the code looks like this: app.route('/upload/').put(function(req, res, next) { ...

javascriptnode.jsexpressfile-upload

How can I remove a dynamically added <tr> element using jQuery?

I insert the <tr> into the <tbody> for (var i = 0 ;i < 12 ;i++){ $(`<tr><td>test</td></tr>`).appendTo('#songsTbody'); } within this HTML structure. <tbody id="songsTbody"> </tbody> ...

javascripthtmljquery

Express.js app does not seem to properly handle app.use(express.raw()) functionality

I am in the process of creating an Express application that is designed to handle binary post data. The code snippet below showcases my progress so far: Server-side: var express = require('express'); var app = express(); var PORT = 3000; app.us ...

javascriptnode.jsexpress

The Django application is failing to interact with the AJAX autocomplete functionality

After typing the term "bi" into the search bar, I expected to see a username starting with those initials displayed in a dropdown list. However, nothing is showing up. Here are the codes I have used: search.html <html> <div class="ui-widget"> ...

javascriptjquerypythonajaxdjango

Error in the execution of the if statement within $(window).width() when it is not supposed to be

Hello everyone, I'm facing an issue with the jQuery $(window).width when using if statements. It seems that my function is still running even when the window width is smaller than 991 pixels, although my if statement specifies that it should run only ...

javascriptjquery

Loop Swig with Node.js and Express!

I'm attempting to create a loop in order to access array objects using swig. The goal is to make a loop that checks the object's length. I am able to access the objects by {{styles[0].style}}, where [] represents an array. So, essentially what I ...

javascriptnode.jsexpressswig-template

Utilizing CSS Scroll-snap for Seamless Navigation

Attempting to create a basic carousel using scroll-snap, but encountering an issue where the carousel is randomly scrolling on load instead of starting with the first picture. See code snippet below. Any ideas on resolving this? .carousel { ...

htmlcss

Creating a row with 5 columns in Bootstrap 4 dynamically is a handy trick for enhancing the layout of your website

Struggling to find the right layout for displaying products on my store's home page. <div class="row"> @foreach($produts as $product) //this is the syntax of my templating engine <div class="col-md-3"> </div> @endf ...

cssbootstrap-4

How to selectively display specific columns when outputting JSON to a dynamic HTML table?

I'm looking to output specific JSON data in an HTML table with JavaScript. The headers will remain the same, but the JSON content will vary. Currently, I have a working function that generates the entire table using JavaScript: <body> ...

javascriptjson

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

I am working on a form that I put together using various pieces of code that I found online. My knowledge of HTML and JavaScript is very basic. The form includes a button that, when clicked, will add another set of the same form fields. Initially, I added ...

javascriptjqueryhtmlvalidationforms

Discovering the ways to retrieve Axios response within a SweetAlert2 confirmation dialog

I'm struggling to grasp promises completely even after reviewing https://gist.github.com/domenic/3889970. I am trying to retrieve the response from axios within a sweetalert confirmation dialog result. Here is my current code: axios .post("/post ...

javascriptlaravelvue.js

The CSS Media Query won't be effective for a precise 767

I have created an HTML file that changes the background color based on the browser width. When the width is 769, the background color is set to white. At 768, it changes to green. However, when the width is 767, I expected it to become red but it still rem ...

cssmedia-queries

How can I transmit information to the model without relying on query string parameters in Express?

Currently, I am working with two controllers - authController and onboardingController. The authController communicates with the onboardingController using the following line of code: res.redirect('/onboarding/info?profileId=' + profile.id + &ap ...

javascriptexpressquery-string

What steps are necessary to configure .eslintrc to identify the use of 'require'?

I recently started using ESLint and successfully integrated it with IntelliJ. Initially, ESLint did not recognize node out of the box. After consulting the documentation, I created a configuration file named .eslintrc at the project's root folder, sp ...

javascriptintellij-ideaeslintjshintlint

Retrieving a variable from a JSON array with multiple dimensions using jQuery

Currently, I am working on fetching a multidimensional JSON array using JQUERY. I am facing challenges in extracting specific items from the array and inserting them into the HTML. I need assistance in navigating through the array to retrieve these elemen ...

javascriptjqueryjson

Having trouble parsing the JSON object values within the Error section of the Ajax call

When making an Ajax call to a rest web API, I encountered an error that I need help resolving. Here is the code snippet: $.ajax({ url: "/********/getbytitle('****')/items", type: "POST", contentType: "applicat ...

javascriptjqueryjsonajax

The propagation of onClick events in elements that overlap

Having two divs absolutely positioned overlapping, each containing an onClick handler. The issue is that only the top element's onClick handler fires when clicked. React 17 is being used. Here is some sample code: <div style={{ position: "abs ...

javascripthtmlreactjstypescript