jhpratt/skrolr

Lightweight JavaScript / TypeScript library that makes creating dynamic scrollers easy

skrolr's Issues

Is skrolr basic in its final form?

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).

Dead page if there is no slides

Sliding back, last element drops

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:

1. Duplicate the entire list if less than width+1 items
2. Don't remove element until animation is complete.

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.

Go-to buttons at bottom

• Determine if left/right is faster
• Copy required number of elements to beginning/end
• Transform with speed previously set
• Remove all elements that were moved to beginning/end

Case when there are no children

Not sure what exactly has to be done. Will have to observe what happens and go from there.

jQuery conflict - due to Object.prototype

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

Allow for "re-initializing"

Essentially override all class variables with new values. Allows for dynamic changing.

Stop scrolling if not in viewport

Reduces load on browser

Should be relatively simple using .getBoundingClientRect()

Move skrolrs[] object to static class variable

Stays within given namespace.

Also, can create .each() function similar to callback, allowing for easier iteration over all skrolrs.

Parameters to set height/width

Would eliminate need for parent element if a specific size is wanted.
Parameters:

• height: #
• width: #
• size: w# h#

Size can be accomplished by splitting on space

Example:

document.getElementById("skrolr").skrolr({
    height: "200px",
    width: "500px"
    // size: "500px 200px"
});

Combine `wasRunning` and `isRunning` to `status`

Eliminated unnecessary variables. Can't include inTransition, as this is separate from the other two.

Option to stop onmouseover

Vertical scrolling

Sometimes jumps when setting different scrollBy values

Upon quick inspection, it appears as though it only manifests with scrollBy = -1. Unsure why.

Randomize order

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.

Scrolling by n elements

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.

Stop scrolling when window is blurred

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.

Can't click arrows while skrolr is active

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.

Implement JS-based scrolling as backup

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)

Allow skrolr to created with an ID as a parameter, rather than an object

Simple typechecking should suffice for determining if it is an ID (string) or DOM object.

Subclass for arrows, buttons

Cleaner structure, easier to interface with

Arrows to move left/right

• Add parameter "arrows"
• Hide by default, show on
  mouseover

Negative scrollBy reverses direction of arrows

Could be resolved by tying arrows to abs(scrollBy). Possibly related to #28.

How to use it with Webpack?

Hi! Nice library, can you add some docs for bundlers?

Custom polyfill for Array.from()

Allows for back-compatibility to ES3. Currently, Array.from() is the only thing restricting compilation to ES6.

Dragging on mobile (with snap)

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.

Move to TypeScript

Will make code much easier to read and maintain.