Ways to stop a scroll event once a certain amount of pixels have been scrolled

Question

Ways to stop a scroll event once a certain amount of pixels have been scrolled

inputs :

1 scroll down event scrolls 100 pixels.
An HTML element is positioned 5 pixels below the bottom of the page and not on screen.
A JavaScript function is triggered when at least 1 pixel of the HTML element comes on screen, and it:

automatically scrolls the page to bring the element fully into view.
prevents any other scroll events during the animation.

events :

the user performs a single scroll-down event (referred to as "the scroll event").

expected result :

After scrolling 6 pixels - where 1px of the element becomes visible - the scroll event should be halted, triggering the automatic scroll by the JavaScript function instead.

actual result :

Despite successfully preventing additional scroll events, there seems to be some conflict between the initial scroll event and the automatic scroll until the full 100px has been scrolled, resulting in a choppy transition.

I attempted to set "overflow:hidden" on the "body" during the animation, but this did not cancel the ongoing scroll event, which persisted even after the completion of the automatic scroll's animation (especially noticeable when using a laptop trackpad).

Any suggestions? Thank you!

P.S.: I am looking for solutions in pure native JavaScript.

javascript html css scroll

Answer 1

Answer №1

To access the current vertical scroll position of a window, you can utilize the window.pageYOffset property.

For instance, consider the following scenario where the code enclosed within an if statement only executes when the scroll position is within the initial 100 pixels from the top of the page:

window.addEventListener("scroll", function(){
    if(window.pageYOffset < 100) {
        console.log("Greetings!");
    }
});

Answer 2

To access the current vertical scroll position of a window, you can utilize the window.pageYOffset property.

For instance, consider the following scenario where the code enclosed within an if statement only executes when the scroll position is within the initial 100 pixels from the top of the page:

window.addEventListener("scroll", function(){
    if(window.pageYOffset < 100) {
        console.log("Greetings!");
    }
});

Ways to stop a scroll event once a certain amount of pixels have been scrolled

Answer №1

Similar questions

Having difficulty positioning breadcrumb items to float on the right side

Is there a way to implement a css/javascript property specifically for a div that is selected in the url?

PHP: Unable to save uploaded image to directory

Navigation bar featuring various distinct webpages

Switch up Three.js texture in externally imported Collada model

Tips for modifying the href attribute when a user clicks

Vue Filtering and Pagination Implementation

Stopping videos in the JQuery Cycle Plugin triggers the stop event

interact with the server in order to make changes to a document

"Enhancing User Experience with Stylish Drop-down Menu Hover

The parent's backdrop remains static and does not shift or change

Retrieve various key-value pairs from the JSON data in the global market API using AJAX

Center and align items vertically within a Bootstrap 4 div, or align them to the

In a React component, clicking on a download anchor tag will open the file in a browser without automatically initiating the

AngularJS showcases the full spectrum of available methods

The NextJS homepage and API endpoint are combined on a single page

Is your Ajax response suddenly failing to work after the initial attempt?

What causes a CSS underline effect to not be applied consistently across all elements?

Transmitting a 2D array to the server and retrieving it using JavaScript

Creating a script for an automated clicker that targets a specific link on a webpage using Chrome