Google Wave-style Scroll Pane jQuery Plugin Example

Download Google Wave-style Scroll Pane jQuery Plugin Source Code

Author: Konr Ness

Blog Post

This is a clone of the scroll pane that Google Wave uses. Google Wave is a revolutionary replacement to email, and they have also revolutionized the concept of a scroll bar.

This jQuery plugin requires jQuery UI. Specifically, it needs the Draggables plugin to support the dragging of the scroll bar.

Like Google Wave, this plugin only works on Firefox, Chrome, and other modern browsers that support transparent images and image data embedded in CSS. With different styles, this plugin would work fine in IE.

Examples

Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra, ipsum id sollicitudin varius, mi lectus ullamcorper tellus, ut vulputate arcu turpis vel mi. Sed convallis vestibulum faucibus. Duis ipsum nisi, tempor sit amet faucibus ac, vestibulum nec est. Aenean nec neque neque, eget semper orci. Nunc porttitor, metus quis lacinia consequat, dolor metus pharetra ante, ac interdum nisl eros sit amet sapien. Etiam a est tortor. Morbi vitae risus est, eget laoreet nunc. Pellentesque nulla mi, malesuada quis tincidunt sagittis, gravida in massa. Nunc congue, elit sed commodo pretium, turpis quam malesuada est, non cursus lectus lectus sed risus. Donec vulputate libero ut mi ultrices at scelerisque odio tempus. Nulla odio ipsum, euismod vel pulvinar in, mollis nec diam. Praesent tincidunt consequat augue, a lobortis urna consectetur ac.

Quisque laoreet egestas sapien, lobortis luctus felis ullamcorper sit amet. Donec interdum ullamcorper lorem, eget elementum diam ornare sed. Nunc et dolor urna. Duis ornare enim dictum enim ullamcorper luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rhoncus, ante ut laoreet pulvinar, enim diam gravida enim, nec adipiscing felis orci eget mauris. Ut quis purus vitae urna consectetur rhoncus et at nisl. Integer eget nunc arcu, id venenatis justo. Sed molestie libero accumsan metus luctus ultrices. Cras nec felis vitae odio aliquam scelerisque eu faucibus odio. Praesent et volutpat dui.

Integer ullamcorper mauris et lectus bibendum id molestie felis ullamcorper. Fusce quis aliquet enim. Pellentesque commodo, augue in accumsan feugiat, nisi nisl faucibus sem, sed hendrerit nunc quam sed leo. Mauris commodo nibh ut dolor luctus mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus tristique imperdiet tellus eu pretium. Phasellus lacinia leo sit amet ligula pretium eget imperdiet magna rutrum. Suspendisse sed dui sit amet lacus vestibulum ullamcorper in ut neque. In luctus urna eget erat dictum nec dictum nunc consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Vivamus at nunc quam, sed mattis enim. Vestibulum malesuada magna metus. Vestibulum vestibulum metus eu libero volutpat rhoncus. Proin lacinia ligula non tellus ornare porta. Aliquam lectus massa, aliquam eget venenatis id, varius sed urna. Vestibulum vitae accumsan augue. Nam varius lacus id risus commodo sit amet placerat eros vehicula. Proin pretium, sapien id tristique semper, lectus dui tincidunt orci, eget interdum massa sapien vitae ligula. Curabitur eget orci eu dui aliquam hendrerit. Vestibulum ante mi, vestibulum in egestas non, suscipit id libero.

Aliquam erat volutpat. Donec blandit, lorem nec sagittis consectetur, tellus neque tincidunt tortor, a venenatis orci felis ut odio. Donec convallis fermentum mauris sit amet malesuada. Suspendisse aliquet commodo porta. Vivamus adipiscing fringilla lectus, eget convallis nulla pellentesque ultricies. Praesent in commodo mi. Praesent fringilla urna eleifend neque commodo mattis. Integer cursus magna nec erat condimentum pellentesque. Curabitur feugiat rhoncus fringilla. Nulla id nisi sit amet metus lobortis tempor. Curabitur non mauris dolor, sit amet fringilla ligula. Donec adipiscing arcu quam, vel consequat neque. Vivamus vitae convallis leo. Nullam eget libero vestibulum neque varius luctus vel sed dui. Sed massa turpis, dictum a fringilla vel, posuere vitae augue. Donec pharetra, mauris eget vestibulum dignissim, dolor nisi interdum odio, at sagittis odio elit ut enim. Phasellus est nibh, sollicitudin in consectetur nec, vestibulum sit amet urna. Quisque tincidunt urna quis sapien pharetra in consectetur diam auctor. Donec est libero, ultrices at aliquam molestie, porttitor pretium augue.

Bottom

Usage

<script type="text/javascript">
    $(function(){
        $('.content').gWaveScrollPane();
    });
</script>