Toss Docs

Toss is a JavaScript function that scrolls any overflow container to a set of coordinates using an animated duration. It will work on any element with overflow set to hidden, scroll,, or auto. Since overflow scrolling does not work in every browser, we highly recommend only using overflow on content that is accessible through additional means, such as with anchor links that point to each "slide" in a horizontal-overflow container.

It has no dependencies. Just call toss(), and pass a reference to an element and a set of options. For example, this script finds an element with an ID of "demo", and scrolls it to top: 300, left: 300 over the course of 5 seconds:

var demoElement = document.getElementById( "demo" );
toss( demoElement, { left: 300, top: 300, duration: 5000 } );

API & Options

In addition to left, top, and duration, there are other options. Here they are with their defaults and acceptable values:

• Left Accepts any positive number, or a string representing a positive or negative shift (such as "+35"). Default: Element's current scrollLeft
• Top Accepts any positive number, or a string representing a positive or negative shift (such as "+35"). Default: Element's current scrollTop
• Duration Time in ms that the animation should take to complete. Default: 200
• Easing The function used to ease the animation speed over time. Easing can use any of Robert Penner's equations. By default, toss uses an ease-out-cubic equation. If providing a function, these arguments are expected: t = current iteration, b = initial value, c = end value, d = total iterations Use toss.easing to provide a different default for all toss animations, or pass an easing function as a callback to the toss method.
• Finished A callback that will execute when the animation is complete. Default: function(){}

Methods & properties

The toss object exposes three properties:

• toss.tossing A method to either check if an element is currently being tossed, or cancel a toss that is currently underway. To check if an element is being tossed, pass a reference to the element: toss.tossing( myElement ) and it will return true if it's currently being tossed. A cancelled toss will still fire its finished callback immediately upon cancelation. To cancel a toss, add a false second argument to that call. Note: calling toss() will also cancel a toss in play before starting a new one.
• toss.easing A property for setting the global easing function for all toss animations. Default is an ease-out-cubic equation.

Example

In the following example, there's a list of numbers in an overflow container that is styled with dimensions that allow its child content to scroll in both directions. The list items are styled to fill the container's width and height 100%, so only one shows at a time. The links above the scrolling container are linked to each respective slide, but some JavaScript is bound to them to use the toss function to scroll to the list item smoothly.