Measuring the pixel distance of scrolling on a page with overflow hidden

Question

Measuring the pixel distance of scrolling on a page with overflow hidden

I am trying to implement a functionality where a class is toggled for the body element on a page with hidden overflow and single screen, based on the amount of scroll. However, there is a challenge: the scrolling behavior involves animation rather than actual scrolling from top.

First, I attempted the following code:

if ($(window).scrollTop() > 1000){
    $('body').addClass( "endScroll");
}
else {
    $('body').removeClass("endScroll");
}

Unfortunately, this method did not work as expected due to the nature of the single screen with hidden overflow.

Subsequently, I tried a different approach:

$(document).bind('mousewheel', function(e) {
    var delta = e.originalEvent.wheelDelta;

    if (delta < 0) {
        $('body').addClass("endScroll");
    } else if (delta > 0) {
        $('body').removeClass("endScroll");
    }

});

Although this solution successfully adds the class, it does so immediately upon any scrolling action. I am struggling to find a way to toggle the class only after scrolling more than 1000 pixels.

Your help would be greatly appreciated!

javascript jquery html css scroll

Answer 1

Answer №1

UPDATE: Here is a revised solution that aligns more closely with your requirements. To track how much the user has scrolled, you can utilize a tracking variable:

var scrollPosition = 0;
$(document).bind('mousewheel', function(event) {
    scrollPosition += event.originalEvent.wheelDelta;        
    if (scrollPosition > 0) scrollPosition = 0;     

    console.log(scrollPosition);        

    if (scrollPosition < -1000) {
        $('body').addClass( "endScroll");
    } else {
        $('body').removeClass("endScroll");
    }    
});

UPDATE 2: Ensuring compatibility with Firefox:

var scrollPosition = 0;
var mouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
$(document).bind(mouseWheelEvent, function(e) {
    var offset = -1 * e.originalEvent.wheelDelta;

    if (mouseWheelEvent == "DOMMouseScroll"){
      offset = e.originalEvent.layerY - e.originalEvent.clientY;
    }

    scrollPosition += offset;        
    if (scrollPosition < 0) scrollPosition = 0;
    console.log(scrollPosition);

    if (scrollPosition > 1000) {
        $('body').addClass( "endScroll");
    } else {
        $('body').removeClass("endScroll");
    }    
});

Answer 2

UPDATE: Here is a revised solution that aligns more closely with your requirements. To track how much the user has scrolled, you can utilize a tracking variable:

var scrollPosition = 0;
$(document).bind('mousewheel', function(event) {
    scrollPosition += event.originalEvent.wheelDelta;        
    if (scrollPosition > 0) scrollPosition = 0;     

    console.log(scrollPosition);        

    if (scrollPosition < -1000) {
        $('body').addClass( "endScroll");
    } else {
        $('body').removeClass("endScroll");
    }    
});

UPDATE 2: Ensuring compatibility with Firefox:

var scrollPosition = 0;
var mouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
$(document).bind(mouseWheelEvent, function(e) {
    var offset = -1 * e.originalEvent.wheelDelta;

    if (mouseWheelEvent == "DOMMouseScroll"){
      offset = e.originalEvent.layerY - e.originalEvent.clientY;
    }

    scrollPosition += offset;        
    if (scrollPosition < 0) scrollPosition = 0;
    console.log(scrollPosition);

    if (scrollPosition > 1000) {
        $('body').addClass( "endScroll");
    } else {
        $('body').removeClass("endScroll");
    }    
});

Answer 3

Answer №2

Experience the magic of scrolling to 1000px and watch as the background transforms from black to red when you scroll up.

$(window).on("scroll", function() {
    if($(window).scrollTop() >  1000){
        $(".scroll-div").addClass('scroll-div-red');
    }
    else{
    $(".scroll-div").removeClass('scroll-div-red');   
    }
});

.scroll-div{
  background:#000;
  height:1500px;
  overflow:hidden;
}
.scroll-div-red.scroll-div{
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-div">

</div>

Answer 4

Experience the magic of scrolling to 1000px and watch as the background transforms from black to red when you scroll up.

$(window).on("scroll", function() {
    if($(window).scrollTop() >  1000){
        $(".scroll-div").addClass('scroll-div-red');
    }
    else{
    $(".scroll-div").removeClass('scroll-div-red');   
    }
});

.scroll-div{
  background:#000;
  height:1500px;
  overflow:hidden;
}
.scroll-div-red.scroll-div{
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-div">

</div>

Measuring the pixel distance of scrolling on a page with overflow hidden

Answer №1

Answer №2

Similar questions

Brother or sister is never empty, as every comment is considered an entity

Creating a chat interface with chat bubbles in React JS can be done by implementing components such as Message

The Ajax search box displays results from the most recent query

Using Laravel with Ajax can sometimes result in successful requests, while other times they may fail

Issue encountered: "An error has occurred stating that your cache folder contains files owned by root. This is likely a result of a bug present in older versions of npm. This issue arose during the execution of the

When deciding between utilizing a Javascript animation library and generating dynamically injected <style> tags in the header, consider the pros and cons of each

Can one function be invoked from another function in Node.js?

Steps for updating the property "project_id" within a nested JSON array to "project_name"

Create a React Native layout with a set width and the ability to stretch to fill

Is it possible to develop in React without using webpack, relying solely on Gulp instead?

Exploring the plane intersection within a 3D object using Three.js

The error message "Error: cannot read property ‘setDirtyAttribute’ of null" may be encountered when attempting to use the method YourModel.create({...}) in ember-typescript-cli

Looking for some help with tweaking this script - it's so close to working perfectly! The images are supposed to show up while

Utilizing Python Selenium to Interact with Buttons

Print the page number using HTML and PHP

Tips for utilizing the jQuery selectbox plugin on multiple elements within a single page

How can I insert a button into a Flatlist using React Native?

Adaptable Design for Smartphones

Incorporating a View into a Sidebar in CakePHP

How to include a listview in the footer navbar using jQuery Mobile