tarun-dugar / easy-scroll Goto Github PK

View Code? Open in Web Editor NEW

121.0 4.0 11.0 6.14 MB

A lightweight native javascript library to perform smooth scrolling with animation

License: MIT License

JavaScript 58.45% HTML 31.27% CSS 10.28%

html scrolling smooth-scrolling javascript javascript-library easing-functions bezier-curves animation-library

easy-scroll's People

Contributors

Stargazers

Watchers

Forkers

rxhealth sithmel rakibulhaq liuwei3230 said-fd juho-jaakkola theghostcasper tracis cuperino smatdnepr prismadvert

easy-scroll's Issues

Problems with horizontal scrolling

First of all thanks for your work on this great library! 😄

I'm having some problems with horizontal scrolling...

When I use easyScroll (to right) with a amount of i.e 200px it doesn't move the scroll 200px exactly.
When I use easyScroll with the direction to left the scroll simply goes to zero.

Example

I fixed the problem 1 by ensuring that when the animation is finished it will scroll to the amount requested.
The second problem I fixed by changing the totalScroll - scrollAmt - initialScrollPosition to initialScrollPosition - scrollAmt

I was also having a problem with this line totalScroll = scrollableDomEle[scrollLengthProp] - scrollableDomEle[elementLengthProp]; It would't let me scroll to left in some cases.

I didn't submit a pull-request because I don't know if those changes can break the scrolling in other cases.

How can I stop the scroll animation while it is running?

For example, I assign the duration of the scroll from one point to another to have a duration of 5000 (duration: 5000), how can I stop it at a certain moment?

I made some typescript types

Hey there,
I made some typescript types.
unfortunately, this library doesn't really do what I want but I hope this can be included or added to definitlytyped.

declare module 'easy-scroll' {
    interface Options {
        /**
         * Window or any other scrollable DOM element
         */
        scrollableDomEle: Element;
        /**
         * The direction in which you want the element to scroll - top, left, bottom, right
         */
        direction: 'top' | 'left' | 'bottom' | 'right';
        /**
         * The duration in milliseconds over which you want the scrolling to happen
         */
        duration: number;

        easingPreset:
            | 'linear'
            | 'easeInQuad'
            | 'easeOutQuad'
            | 'easeInOutQuad'
            | 'easeInCubic'
            | 'easeOutCubic'
            | 'easeInOutCubic'
            | 'easeInQuart'
            | 'easeOutQuart'
            | 'easeInOutQuart'
            | 'easeInQuint'
            | 'easeOutQuint'
            | 'easeInOutQuint';
        /**
         * Object containing the 4 points to define a bezier curve
         * {
         *     'x1': Number(>= 0 and <= 1),
         *     'y1': Number,
         *     'x2': Number(>= 0 and <= 1),
         *     'y2': Number
         * }
         */
        cubicBezierPoints?: { x1: number; y1: number; x2: number; y2: number };
        /**
         * Callback function which is called on each tick of the scroll.
         * The current instance of the scrolling animation is passed as an argument by default.
         * You can use cancelAnimationFrame on this instance to cancel the scrolling.
         */
        onRefUpdateCallback?: any;
        /**
         * Callback function which is called after the scrolling is done
         */
        onAnimationCompleteCallback?: any;
        /**
         * The amount that needs to be scrolled in pixels.
         * If this is not specified, the element will be scrolled to the end.
         */
        scrollAmount?: number;
    }
    const easyScroll: (options: Options) => void;
    export default easyScroll;
}

The callback types arent very specific cause I didnt get to using them.
If you were to add it to the library I think you just need to add the code above as index.d.ts to the root of the project and then in your package.json add the line "typings": "index.d.ts"

Using easy-scroll on window with Chrome has erratic scrolling

Hi,

with the current version of Chrome (v98.x and maybe also the previous version) on MacOS and Windows 10 (also on Edge) scrolling on the window DOM element has a strange scrolling behavior, first very slow (for around half of the duration) and then fast for the rest of the duration/animation (independent of the "easyPreset" setting).

The effect doesn't happen on Safari or Firefox.

The DOM looks like

<html>
    <body>
        <main> <!-- this holds all the big content -->
            <section id="section-1"></section>
            <section id="section-2"></section>
            <section id="section-3"></section>
            <!-- ... more sections -->
        </main>
    </body>
</html>

with the CSS like

body {
    overflow-x: hidden;
    overflow-y: auto;
}

main {
    display: flex;
    width: 100vw;
    justify-content: flex-start;
}

section {
    position: relative;
    min-height: 100vh; /* this is needed because the content might be bigger then viewport height */
}

A sample JS code:

let isAutoScrolling = false;

function scrollToSection2() {
    const sectionToScrollTo = document.querySelector('#section-2');
    scrollToElement(sectoinToScrollTo);
}

function scrollToElement(sectionToScrollTo) {
    isAutoScrolling = true;
    
    easyScroll({
        scrollableDomEle: window,
        direction: 'bottom',
        duration: 300,
        easingPreset: 'linear',
        scrollAmount: Math.abs(sectionToScrollTo.getBoundingClientRect().top),
        onRefUpdateCallback: (scronnAnimId) => {
            // the ID differs from call to call, that is right, isn't it?
        },
        onAnimationCompleteCallback: () => {
            console.log('animation complete');
            isAutoScrolling = false;
        }
    });
}

window.addEventListener('scroll', () => {
    console.log('onScroll', isAutoScrolling);
});

The console output differs a bit depending on the Browser.

On Chrome/FF it shows that the onScoll event is still triggered multiple times after the animation was stated to be complete (i.e. the callback has been called).

On Safari the onScroll event is triggered only once.

But the behavior is on Chrome that the "linear" animation is not linear

> scrollToSection2();
onScroll true
onScroll true
onScroll true
onScroll true
[...]
animation complete
onScroll false
onScroll false
onScroll false
onScroll false

Any idea what might be the problem? I'm not sure if this is the source of the problem having different behavior on the various Browers.

In the end I want "snap"/scroll to a section when the mouse scrolling has been finished. Maybe any idea how to implement it correctly using this vanilla js lib (or any alternative)?

Kind regards,
Dennis

Multiple calls of easyScroll() end up not working

I'm calling easyScroll() couple of times in a row.
First call - everything works as expected.
Second call - the duration/speed of the animation is slowing down to ~half.
Third call - the script is stuck. Probably the duration is very long.

Left Scroll Issue

I am using the library to animate left and right scroll on the click of a button.

I have a horizontal scrolling div.

The right button works properly but whenever I use the left button, it scrolls all the way to the beginning of the list.

Here's the code I have for the right and the left button

        scrollRight: function() {
            let view = document.getElementById(this.scrollId)
            this.scrollConfig["scrollableDomEle"] = view
            this.scrollConfig["scrollAmount"] = ( view.clientWidth / 20 ) * 5
            this.scrollConfig["direction"] = 'right';
            easyScroll(this.scrollConfig);
        },
        scrollLeft: function() {
            let view = document.getElementById(this.scrollId)
            this.scrollConfig["scrollableDomEle"] = view
            this.scrollConfig["scrollAmount"] = ( view.clientWidth / 20 ) * 5
            this.scrollConfig["direction"] = 'left';
            easyScroll(this.scrollConfig);
        },

I am using it in a Vue app.

Any help would be really appreciated. Also I checked your commits and saw that the latest release has 'left scroll fix' so I was just wondering if I am doing something wrong.

onAnimationCompleteCallback is called too much times?

Hi.
I want to call easyScroll, whe youser scroll up, because at the top of the page i have an iframe, and inside i have a scroll too.

    window.onscroll = function (e) {
        const scrollUp = this.oldScroll > this.scrollY;
        if (scrollUp && window.pageYOffset < 800) {
            easyScroll({
                'scrollableDomEle': window,
                'direction': 'top',
                'duration': 400,
                'easingPreset': 'linear',
                'onAnimationCompleteCallback': function () {
                    console.log('completed')
                }
            });
        }
        this.oldScroll = this.scrollY;
    }

Bui i got "completed" 95 times.

import fails

I'm trying to make easy-scroll work via import. After installing it via cli I tried multiple ways of importing but always get an error:

import easyScroll from 'easy-scroll';
TypeError: Module specifier does not start with "/", "./", or "../".
import easyScroll from '../../node_modules/easy-scroll/dist/easy-scroll.js';
SyntaxError: Importing binding name 'default' cannot be resolved by star export entries.
import { easyScroll } from '../../node_modules/easy-scroll/dist/easy-scroll.js';
SyntaxError: Importing binding name 'easyScroll' is not found.

Any leads? (Including it via scrip in html works though)

Invalid cubic bezier formula

Something I have noticed is that the formula you use for determining the Bezier easing percentage isn't valid.

The formula finds either the horizontal or vertical coordinate of a point on the Cubic Bezier curve. Although it is correct, you are mixing the coordinates, using both coordinates of the control points, instead of only one. This error results in an incorrect completion percentage of the animation.

I would suggest using a separate implementation of the Cubic Bezier easing curves if you wish to keep this feature or use only the timing functions for easing.

Error with Horizontal Scrolling

easyScroll({
'scrollableDomEle': document.querySelector('.primaryMainCon'),
'direction': 'right',
'duration': 3000,
'easingPreset': 'easeInQuad',
'scrollAmount': 1000
});
Error Message in Chrome:
Object(...) is not a function
Error Message in Safari:
Object is not a function. (In 'Object(easy_scroll__WEBPACK_IMPORTED_MODULE_4__["easyScroll"])', 'Object' is an instance of Object)

SameSite cookie warning in Chrome

Adding this line to my html:
<script async defer src="https://unpkg.com/easy-scroll"></script>

Triggers this warning in Chrome 77:

A cookie associated with a cross-site resource at http://unpkg.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

No animation effect and not exactly

It don't have animation effect when direction is top,
and scrollAmount is not exactly
DEMO