jhpratt / skrolr Goto Github PK
View Code? Open in Web Editor NEWLightweight JavaScript / TypeScript library that makes creating dynamic scrollers easy
License: GNU General Public License v3.0
Lightweight JavaScript / TypeScript library that makes creating dynamic scrollers easy
License: GNU General Public License v3.0
Essentially override all class variables with new values. Allows for dynamic changing.
Upon quick inspection, it appears as though it only manifests with scrollBy = -1
. Unsure why.
If there are as many items in the list as there are being shown (the width), it causes the last element to drop when moving back.
Two possible solutions:
Solution 2 is the better solution, as it minimizes waste. However, I will likely implement solution 1, as it also avoid potential lazy-loading issues.
Simple typechecking should suffice for determining if it is an ID (string) or DOM object.
I have problem with skrolr.js. When I put it on a website other scripts don't work properly.
For example: menu does not work
site: http://chks.chotow.pl/beta
Able to do this by setting class variable, then forward()
and backward()
just need ±1 to be replaced with ±variable. This would inherently allow for RTL scrolling with negative values.
Minimal issue. This would put skrolr on par with other libraries that are out there, which combined with other features would (in my opinion) make it much better.
Honestly not sure how this will be implemented, as I haven't looked into it at all.
As this is implemented with flexbox, this can be accomplished with the order property. An array can be initialized with length = numObjs. Iterate through objects, getting (and removing) that element from the array and setting it as the order property.
Will make code much easier to read and maintain.
window.addEventListener( "focus", function() {...} );
window.addEventListener( "blur", function() {...} );
Just need to start/stop the interval.
Will also need a wasRunning
variable that stores whether it was running before being blurred. Without this, it would start even if it wasn't running previously.
Cleaner structure, easier to interface with
This will allow for greater compatibility with older browsers (that don't support CSS transitions). Should also add -webkit
, -moz
, and -o
prefixes for compatibility.
Just adding prefixes allows support back to every browser released Apr. 2011 onwards. JS backup would allow it indefinitely (I think)
Hi! Nice library, can you add some docs for bundlers?
Reduces load on browser
Should be relatively simple using .getBoundingClientRect()
Not sure what exactly has to be done. Will have to observe what happens and go from there.
Would eliminate need for parent element if a specific size is wanted.
Parameters:
Size can be accomplished by splitting on space
Example:
document.getElementById("skrolr").skrolr({
height: "200px",
width: "500px"
// size: "500px 200px"
});
Eliminated unnecessary variables. Can't include inTransition
, as this is separate from the other two.
Could be resolved by tying arrows to abs(scrollBy)
. Possibly related to #28.
Stays within given namespace.
Also, can create .each() function similar to callback, allowing for easier iteration over all skrolrs.
Allows for back-compatibility to ES3. Currently, Array.from()
is the only thing restricting compilation to ES6.
skrolr basic is currently only 605 bytes between the JS and CSS combined (402 JS, 203 CSS). I am certain the CSS cannot be further reduced, but am not sure if there are any hacky solutions to minify the JS further. At only 402 bytes, it is about as small as I can imagine it getting.
One way I could reduce the size (albeit slightly) is by changing the custom HTML attribute from data-skrolr
to something else, although that would deviate from the skrolr
prefixing I've been using to avoid conflicts.
For now, I will leave this issue open indefinitely pending feedback from anyone that happens to come across this (which is very few people at this point).
Title. If skrolr is in the middle of a transition (as designated by data-skrolr-in-transition
, it won't scroll when the arrows are clicked. Intended to prevent clicking multiple times (which causes errors of its own), but slightly overreaching.
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.