Effect triggered upon scrolling to the top or bottom of the page

Would greatly appreciate your help in identifying errors in my script. Can someone point out where I might be going wrong?

I am using two plugins - the first for custom scrollbar changes, and the second which I have cut and pasted into the first call. Below is the code with some comments.

/* Setting custom scrollbar for content-section */
    jQuery('.carousel-item').mCustomScrollbar({ axis:"y", theme: "rounded-dots", scrollButtons: { enable: true }, scrollInertia: 300,
        callbacks:{
            whileScrolling:function(){
                /* this.mcs.draggerTop <- Accessed from the example on the official First plugin documentation */
                var pct=this.mcs.draggerTop;
                
                /* The following plugin is used to achieve a smooth scrolling effect, taken from the Second plugin available on GitHub. Below is an excerpt from jquery.fancy-scroll.js file. */
                var defaults = {
                    animation: "bounce",
                    bounceDistance: 150,
                    animDuration: "0.3s",
                    animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)",
                    innerWrapper: '.carousel-item'
                };
                
                fancy_scroll = function(options){
                    var settings = $.extend({}, defaults, options),
                        el = $(settings.innerWrapper),
                        container = $(this),
                        posWas = 0,
                        status = "off";
                        
                    $.fn.bounceEffect = function(px, s, anim, settings) { 
                        var selector = $(this) 
                        selector.css({
                            "-webkit-transform": "translate3d(0, " + px + ", 0)",
                            "-webkit-transition": "all " + s + " " + anim,
                            "-moz-transform": "translate3d(0, " + px + ", 0)",
                            "-moz-transition": "all " + s + " " + anim,
                            "-ms-transform": "translate3d(0, " + px + ", 0)", 
                            "-ms-transition": "all " + s + " " + anim,
                            "transform": "translate3d(0, " + px + ", 0)",
                            "transition": "all " + s + " " + anim
                        })
                    }
                    
                    if(pct==100){//if the user is scrolling down...
                        alert('dol');
                        if(status == "off") {
                            status = "on"
                            $('.carousel-item').bounceEffect(settings.bounceDistance * -1 + "px", settings.animDuration, settings.animEasing, settings);
                            $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                                $('.carousel-item').bounceEffect("0", settings.animDuration, settings.animEasing, settings);
                                $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                                    status = "off"
                                });
                            });
                        }
                    }
                    
                    if(pct==0){ //if the user is scrolling up...
                        if(status == "off") {
                            if(container.scrollTop() <= 0) {
                                status = "on"
                                $('.carousel-item').bounceEffect(settings.bounceDistance + "px", settings.animDuration, settings.animEasing, settings);
                                $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                                    $('.carousel-item').bounceEffect("0px", settings.animDuration, settings.animEasing, settings);
                                    $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                                        status = "off"
                                    });
                                });
                            }
                        }
                    }
                }
                
                fancy_scroll();
            }
        }
    });

Warm regards

Answer №1

It seems clear to me what I am trying to accomplish, but I have not received any assistance so far. After revising and simplifying the code, here is my solution: implementing a custom scroll with effects when scrolling to the top and bottom.

/* Implement custom scrollbar for content-section */
jQuery('.carousel-item').mCustomScrollbar({ axis:"y", theme: "rounded-dots", scrollButtons: { enable: true }, scrollInertia: 100,
    callbacks:{
        whileScrolling:function(){
            var pct=this.mcs.topPct;
            // alert(pct);
            
            var settings = {
                    animation: "bounce",
                    bounceDistance: 60,
                    animDuration: "0.19s",
                    animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)" },
                el = $('.carousel-item'),
                container = $('.carousel-item'),
                posWas = 0,
                status = "off";
            $.fn.bounceEffect = function(px, s, anim, settings) { 
                $('.carousel-item').css({
                    "-webkit-transform": "translate3d(0, " + px + ", 0)",
                    "-webkit-transition": "all " + s + " " + anim,
                    "-moz-transform": "translate3d(0, " + px + ", 0)",
                    "-moz-transition": "all " + s + " " + anim,
                    "-ms-transform": "translate3d(0, " + px + ", 0)", 
                    "-ms-transition": "all " + s + " " + anim,
                    "transform": "translate3d(0, " + px + ", 0)",
                    "transition": "all " + s + " " + anim
                })
            }
            if(pct==100){//if the user is scrolling down...
                if(status == "off") {
                    status = "on"
                    $('.carousel-item').bounceEffect(settings.bounceDistance * -1 + "px", settings.animDuration, settings.animEasing, settings);
                    $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                        $('.carousel-item').bounceEffect("0", settings.animDuration, settings.animEasing, settings);
                        $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                            status = "off"
                        });
                    });
                }
            }
            if(pct==0){ //if the user is scrolling up...
                if(status == "off") {
                    status = "on"
                    $('.carousel-item').bounceEffect(settings.bounceDistance + "px", settings.animDuration, settings.animEasing, settings);
                    $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                        $('.carousel-item').bounceEffect("0px", settings.animDuration, settings.animEasing, settings);
                        $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                            status = "off"
                        });
                    });
                }
            }
        }
    }
});

I hope this implementation proves helpful to those seeking a similar effect. If there are any errors in the above code, please feel free to point them out.

Best regards

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

Placing a group of input fields and a button based on the data-id attribute of the element

I have a form that appears when a button is clicked, and the save button saves input values into an object. Is there a more efficient way to write this function if I need to create 9 more buttons with different data-id attributes (e.g. data-id="2" and so ...

Node.js: Promise chain abruptly stops after reaching a predefined limit without causing any errors

Currently, I am attempting to perform a straightforward operation in nodejs using promises. My task involves working with an array that consists of objects. These objects contain query parameters for a URL that I need to access through a GET request. As th ...

When setting the margin to auto, it perfectly centers elements on servers and IE, but on Chrome off the server, it appears to be aligned to the

There seems to be an issue with the display of my page in Chrome - it starts at the middle and ends on the right side. However, when I view it on my server or try it on Internet Explorer 11, it appears centered. Why is that? This problem only arose after ...

Differences between urlencoded and form-data in Node.js

Can anyone suggest a fast method to distinguish between passing urlencoded data and form-data (multiparty) data in Node.JS? ...

The text exceeds the width of the paragraph

Something very odd is happening, a rare occurrence in my over 20 years of web development experience. The text within the paragraph seems to be overflowing its boundaries: https://i.sstatic.net/bmB1zg7U.jpg My client specifically requested the Duffy Scri ...

Performing a mouse hover action with Selenium WebDriver

Can someone guide me on how to perform a mouse hover action in Selenium WebDriver? The mouse hover action needs to be done on a tab where it hovers and then clicks on the tab. Is there a way to achieve this using JavaScript executor and java? ...

The poker table designed with CSS does not resize effectively when displayed in smaller dimensions

I have put together a CSS poker table design that I am quite happy with at the moment: https://jsfiddle.net/78fcs01m/3/ CSS: .poker-container { display: grid; width: 100vw; height: 100vh; .poker-table { justify-self: cent ...

Utilizing Electron to save editable user data in a .txt file

I am making an electron app that converts data from .txt files to Javascript arrays. This data is stored inside a folder called faces in the main directory. I also have a button in my app which, when clicked opens file explorer at the faces folder so the u ...

Is there a way to utilize the variable within a router-link?

Is there a way to incorporate a variable into a router-link? <Col span="8" v-for="(item,index) in this.data" > <router-link to='/home/workpanel/true/ + item.name'> When trying to use the variable, it remains as a string: ...

Establish boundaries for D3.js circle reports

I am currently working on a visualization project where I want to arrange cells with higher values to appear towards the top and left, similar to a gravity force. However, I am facing difficulties in keeping multiple circles within the boundaries of the re ...

Ways to remedy the white line produced by CSS transform when hovered over?

Has anyone discovered a fix for the white line or border that appears when an element is transformed with CSS scale on hover? I've tried various solutions such as: transform: translateZ(0), -webkit-backface-visibility: hidden, transform-style: preser ...

Difficulty parsing JSON in MVC .Net Core Controller

I am dealing with a Web Application built in ASP.Net Core 5 that communicates with a Web API in .Net Core. The data returned from the API in JSON format needs to be read from a file named landing.js. Despite the data being stored in the variable (data), I ...

Clipped Words & Silhouettes

I'm having trouble ensuring the text in this particular example displays correctly. I am experiencing challenges with the clipping of text and shadows on certain letters, and I'm struggling to identify the root cause as well as the solution. In ...

Display only the spans that contain text or are not empty

I need a solution to hide only those spans that are empty. <div class="img-wrapper"> <div class="showcase-caption" style="display: block; "> <span id="MainContent_ImageCaption_0">This one has caption</span> </div> ...

Creating a color gradient for hyperlinked text when hovered over: a tutorial

How can I achieve this effect using CSS only? I want the link color to change from #00C to #000 when hovered over, with a gradient transition taking 1 second. ...

What is the best way to trigger a re-render in a child component in React using forceUpdate

Is there a way to force reload a child component in React, similar to using this.forceUpdate() for a parent component? For example, consider the following scenario: buttonClick = () => { // This updates the parent (this) component this.forceUpda ...

The customized sweet alert button is failing to trigger its designated function

I integrated vue-swal to show a pop-up dialog with customized functionality. However, I faced an issue while modifying the swal. In my modified version, there are 3 buttons each with specific actions that should be triggered upon clicking. But for some rea ...

Retrieve the text and image simultaneously using jQuery

I need to retrieve either text or image within a modal. Use textCont to retrieve text. The content within a div can be either text or image. It will retrieve whatever is present there. Below is the JavaScript code for text retrieval. var contId = 0; var ...

A guide to accurately fetching the transform properties of an SVG element within a d3.transition

Currently, I am experimenting with d3 animations using d3.transitions specifically involving circles. Consider the circle animation example below (d3.transition()): animationTime = 500; svg = d3.select('#svg'); // Locate th ...

The module you are trying to access at './server/controller/controller.js' does not contain an export with the name 'default'

I'm fairly new to backend development and I've recently started using ES6 modules in my project. However, when I try to import the controller file into index.js and run the project, I encounter the following error: Syntax Error: The requested mo ...