tarun-dugar / easy-scroll Goto Github PK
View Code? Open in Web Editor NEWA lightweight native javascript library to perform smooth scrolling with animation
License: MIT License
A lightweight native javascript library to perform smooth scrolling with animation
License: MIT License
First of all thanks for your work on this great library! ๐
I'm having some problems with horizontal scrolling...
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.
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?
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"
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
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.
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.
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.
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)
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.
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)
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 withSameSite=None
andSecure
. 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.
It don't have animation effect when direction
is top,
and scrollAmount
is not exactly
DEMO
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.