MooTools

How to use

Javascript:

var myScroller = new mooElementScroller('element', {
    resize: {
        enabled: true,
        offset: 180
    },
    slow: 2
});

Stylesheet:

#somelist-mes-wrapper {
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
}

#somelist {
    list-style: none;
    padding-right: 100px;
}

#somelist li {
    padding: 10px;
    margin: 20px 0px;
    border: 1px solid gray;
    background-color: lightgreen;
}

.mes-scrollarea {
    position: fixed;
    top: 50%;
    margin-top: -58px;
    height: 156px;
    right: 20px;
    z-index: 3;
}

.mes-up, .mes-down {
    height: 48px;
    width: 51px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-color: transparent;
}

.mes-up {
    background-image: url('go-up.png');
    background-position: top left;
    margin-bottom: 60px;
}

.mes-down {
    background-image: url('go-down.png');
    background-position: bottom left;
}

HTML:

<ul id="somelist">
    <li>One</li>
    <li>Two</li>

    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
</ul>

Options

The plugin uses a modifier internally that controlls the scroll speed.

• slow: Default: 5. MouseOver speed.
• fast: Default: 25. MouseDown speed.
• scrollSpeed: Default: 30. Pixels to move with each scroll event.

The resize hash controlls whether the wrapping element should be resized if the page is resized. Offset will be substracted from the maxmimum width available.

• resize: Default: { enabled: false, offset: 0 }.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.