Scrollview for jQuery and jQuery Mobile

Updated on May 17, 2021

Create scrollable layouts with the help of the scrollview component.

The scrollable elements can house content of any type, size or depth. Use it for paging or just a simple list of items users need to scroll through.

Shipping with useful features for creating horizontally scrollable layouts:

Usage on mobile and desktop
Touch and mouse interaction supported
Compatible with other components, like cards, listviews
Paging & variable width items

Snap to items or freeform scrolling
Multiple theme support
Liquid or fixed layout

As part of Gesture enabled listview it can be picked up with the Framework and Complete licenses or with the component license.

Interested in scroller components? Other demos that could be useful:

Select Scroller

Scrollview demos available for other frameworks.

Viewing demos & code for

jQuery Scrollview Scrollview for jQuery and jQuery Mobile Scrollview for jQuery and jQuery Mobile

Theme

iOS

Material

Mobiscroll

Windows

Auto

Pop
Rock
Jazz
Piano
Electric

- Hello
  
  Adele
- Sorry
  
  Justin Bieber
- Hotline Bling
  
  Drake
- What Do You Mean?
  
  Justin Bieber
- The Hills
  
  The Weeknd
- Stitches
  
  Shawn Mendes
- Love Yourself
  
  Justin Bieber
- Here
  
  Alessia Cara
- Like I'm Gonna Lose You
  
  Meghan Trainor Featuring John Legend
- Same Old Love
  
  Selena Gomez
- 679
  
  Fetty Wap Featuring Remy Boyz
- Hallelujah
  
  Jordan Smith
- Gonna Know We Were Here
  
  Jason Aldean
- The Fix
  
  Nelly Featuring Jeremih
- I Know What You Did Last Summer
  
  Shawn Mendes & Camila Cabello
- Me, Myself & I
  
  G-Eazy x Bebe Rexha
- Big Rings
  
  Drake & Future
- When We Were Young
  
  Adele
- My House
  
  Flo Rida
- Ex's & Oh's
  
  Elle King
- Renegades
  
  X Ambassadors
- Stressed Out
  
  twenty one pilots
- Shut Up And Dance
  
  WALK THE MOON
- Adventure Of A Lifetime
  
  Coldplay
- Irresistible
  
  Fall Out Boy
- Uma Thurman
  
  Fall Out Boy
- Everglow
  
  Coldplay
- Let It Go
  
  James Bay
- Someone New
  
  Hozier
- First
  
  Cold War Kids
- S.O.B.
  
  Nathaniel Rateliff & The Night Sweats
- Emperor's New Clothes
  
  Panic! At The Disco
- LA Devotee
  
  Panic! At The Disco
- 2 Heads
  
  Coleman Hell
- Get Up
  
  Jeff Lorber Fusion
- When I'm With You
  
  Vincent Ingala
- Silverado
  
  Fourplay
- Button Legs
  
  Cindy Bradley
- Can You Feel It
  
  Rick Braun
- Initiate
  
  Julian Vaughn
- All In
  
  Pieces Of A Dream
- Forever And A Day
  
  Euge Groove Featuring Althea Rene
- Juliet
  
  Ken Navarro
- Gone
  
  Mindi Abair And The Boneshakers
- Good Foot
  
  Dave Koz Featuring Jeff Golub
- Magic Men
  
  Marion Meadows Featuring Elan Trotman
- Because Of You
  
  Gerald Albright
- A Better Man
  
  Phil Perry
- Honey Girl
  
  Ryan Montano
- Etudes Tableaux
  
  Rachmaninoff
- Piano Sonata in C Minor, K. 457
  
  Mozart
- Fantasie-Impromptu Op. 66
  
  Chopin
- Prelude in G Minor Op. 23
  
  Sergei Rachmaninoff
- Moonlight Sonata Op. 27
  
  Beethoven
- Grande Valse Brilliante
  
  Chopin
- Brahms
  
  Brahms
- Sonata in B Minor
  
  Liszt
- Diabelli Variations
  
  Beethoven
- Goldberg Variations
  
  Bach
- Lean On
  
  Major Lazer & DJ Snake Featuring M0
- Where Are U Now
  
  Skrillex & Diplo With Justin Bieber
- Roses
  
  The Chainsmokers Featuring ROZES
- How Deep Is Your Love
  
  Calvin Harris & Disciples
- Hey Mama
  
  David Guetta Featuring Nicki Minaj, Bebe Rexha & Afrojack
- Daddy
  
  PSY Featuring CL
- Dessert
  
  Dawin
- You Know You Like It
  
  DJ Snake & AlunaGeorge
- Hold My Hand
  
  Jess Glynne
- Magnets
  
  Disclosure Featuring Lorde
- Sugar
  
  Robin Schulz Featuring Francesco Yates
- Bang My Head
  
  David Guetta Featuring Sia & Fetty Wap
- Be Right There
  
  Diplo & Sleepy Tom
- Something Better
  
  Audien Featuring Lady Antebellum
- Omen
  
  Disclosure Featuring Sam Smith
- Middle
  
  DJ Snake Featuring Bipolar Sunshine
- Until You Were Gone
  
  The Chainsmokers & Tritonal Featuring Emily Warren

This demo should be experienced in full screen

View in full screen

Preview in fullscreen

Scrollview - Paging

Change demo

Paging

JQuery Horizontal scroll view demo for layout. Use it to build horizontally scrollable paging. Segment content for navigation. For jQuery or jQuery Mobile.

jQuery Javascript Angular Angular JS React

                            
                                    JS
                            
                        


                            
                                    HTML
                            

                        

                        CSS
                    
Copy code

                            $(function () {

    var $categoryNav,
        $contentView

    // init top tabs
    $categoryNav = $('.md-category').mobiscroll().nav({
        lang: ' '
        theme: 'ios',
        themeVariant: 'light',
        type: 'tab',
        onItemTap: function (event, inst) {
            $contentView.mobiscroll('navigate', $('.' + $(event.target).data('page')));
        }

    });

    // init content scrollview
    $contentView = $('.md-content').mobiscroll().scrollview({
        lang: ' '
        theme: 'ios',
        themeVariant: 'light',
        layout: 1,
        paging: true,
        threshold: 15,
        cssClass: 'md-page',
        onAnimationStart: function (event, inst) {
            var selectedIndex = parseInt((-(event.destinationX / inst.contWidth)).toString(), 10),
                $selectedItem = $categoryNav.find('li').eq(selectedIndex);

            if (!$selectedItem.hasClass('mbsc-ms-item-sel')) {
                $categoryNav.mobiscroll('navigate', $selectedItem);
            }
        }
    });

    // init content listview
    $('.md-list').mobiscroll().listview({
        lang: ' '
        theme: 'ios',
        themeVariant: 'light',
        swipe: false,
        striped: true,
        enhance: true,    });
});
                    

                                
                        

                            <div class="mbsc-page">
<div class="md-paging">
    <ul class="md-category mbsc-cloak">
        <li data-id="1" data-page="md-pop" data-selected="true">Pop</li>
        <li data-id="2" data-page="md-rock">Rock</li>
        <li data-id="3" data-page="md-jazz">Jazz</li>
        <li data-id="4" data-page="md-piano">Piano</li>
        <li data-id="5" data-page="md-electric">Electric</li>
    </ul>

    <ul class="md-content mbsc-cloak">
        <li class="md-pop">
            <ul class="md-music-lv md-list mbsc-cloak">
                <li data-icon="play" data-icon-align="right"><img src="https://img.mobiscroll.com/demos/paging/Adele_1x.png" />
                    <h4>Hello</h4>
                    <p>Adele</p>
                </li>
                <!-- Showing partial data. Download full source. -->
            </ul>

        </li>

        <li class="md-rock">
            <ul class="md-music-lv md-list mbsc-cloak">
                <li data-icon="play" data-icon-align="right"><img src="https://img.mobiscroll.com/demos/paging/Elle_King_1x.png" />
                    <h4>Ex's & Oh's</h4>
                    <p>Elle King</p>
                </li>
            </ul>

        </li>

        <li class="md-jazz">
            <ul class="md-music-lv md-list mbsc-cloak">
                <li data-icon="play" data-icon-align="right"><img src="https://img.mobiscroll.com/demos/paging/Jeff_Lorber_1x.png" />
                    <h4>Get Up</h4>
                    <p>Jeff Lorber Fusion</p>
                </li>
            </ul>

        </li>

        <li class="md-piano">
            <ul class="md-music-lv md-list mbsc-cloak">
                <li data-icon="play" data-icon-align="right"><img src="https://img.mobiscroll.com/demos/paging/Rachmaninoff_1x.png" />
                    <h4>Etudes Tableaux</h4>
                    <p>Rachmaninoff</p>
                </li>
            </ul>

        </li>

        <li class="md-electric">
            <ul class="md-music-lv md-list mbsc-cloak">
                <li data-icon="play" data-icon-align="right"><img src="https://img.mobiscroll.com/demos/paging/Major-Lazer_1x.png" />
                    <h4>Lean On</h4>
                    <p>Major Lazer & DJ Snake Featuring M0</p>
                </li>
            </ul>
        </li>
    </ul>
</div>
</div>
                    

                            body,
mbsc-page>.mbsc-page {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: visible;
}

.md-paging,
.md-paging>div,
.md-paging .md-page {
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.md-paging .md-list-cont,
.md-paging .mbsc-scv-item>.mbsc-lv-cont {
    -webkit-box-flex: 1;
    -webkit-flex: 1 auto;
    -ms-flex: 1 auto;
    flex: 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.md-paging .mbsc-lv-img {
    pointer-events: none;
    border-radius: 2.8em;
    height: 2.8em;
}
                    
Show more code

Scrollview - Cards

Change demo

Cards

JQuery Horizontally scrollable card list grouped by interest or category. Segment content for discoverability and navigation. For jQuery or jQuery Mobile.

jQuery Javascript Angular Angular JS React

Scrollview - Layout

Change demo

Layout

JQuery Horizontally scrollable elements with fixed, variable width, paging and full-width containers for image & content carousel. For jQuery or jQuery Mobile.

jQuery Javascript Angular Angular JS React

Scrollview - RTL Support

Change demo

RTL Support

JQuery Horizontal scroll view with full RTL support and source. For jQuery or jQuery Mobile.

jQuery Javascript Angular Angular JS React

Scrollview - Event handlers

Change demo

Event handlers

JQuery Horizontally scrollable page-view demo with event hooks for custom integration and functionality. For jQuery or jQuery Mobile.

Clear event log

EVENTS FIRED:

jQuery Javascript Angular Angular JS React

Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.

Customize & try demos locally

What framework are you using?

Javascript

jQuery

AngularJS

Angular

React

Other

Ionic Angular

Already have an account? Sign in here.

Install demo in your app

Follow this quick, two minute install guide

Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command

$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Ionic project

Copy command

$ mobiscroll config ionic --version=4

You will be prompted to log in with your mobiscroll account. Set your password here

Step 3.Copy the code into your app.

Component
Template
CSS
Module
What to copy from Component

Copy TS

Copy HTML

Copy CSS

Copy Module

Step 4.Run ionic serve in the root folder of your app 🎉

Copy command

$ ionic serve

And voilà, everything should be running smoothly.

Install demo in your app

Follow this quick, two minute install guide

Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command

$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Ionic project

Copy command

$ mobiscroll config ionic --version=4

You will be prompted to log in with your mobiscroll account. Set your password here

Step 3.Copy the code into your app.

Copy TSX

Copy CSS

Step 4.Run ionic serve in the root folder of your app 🎉

Copy command

$ ionic serve

And voilà, everything should be running smoothly.

Customize & try demos locally

How would you like to do it?

Install demo in your app

Follow this quick, two minute install guide

Close window

Step 1.Install the Mobiscroll CLI from npm

Copy command

$ npm install -g @mobiscroll/cli

The CLI makes configuring your apps super simple 👍

Step 2.Run the following command in the root folder of your Angular project

Copy command

$ mobiscroll config angular --version=4

You will be prompted to log in with your mobiscroll account. Set your password here

Step 3.Copy the code into your app. HTML goes into the markup, TS into Typescript.

Copy TS

Copy HTML

Copy CSS

Copy Module

Step 4.Run ng serve in the root folder of your app 🎉

Copy command

$ ng serve

And voilà, everything should be running smoothly.

Thanks for downloading

Try and customize the app locally

Extract the zip file and run the project like any Ionic app. Make sure to have Ionic CLI installed and open the terminal in the app root folder.

Step 1. Run in root folder

$ npm install

Step 2. Start the app

$ ionic serve

Let us know if we can help and enjoy!

Thanks for downloading

Customize demos locally

We have set up a trial so that you can try the demos locally.

Extract the zip file and open the demo in your favorite browser. To install Mobiscroll in your project follow instructions from this page.

Let us know if we can help and enjoy! 👍

Thanks for downloading

Customize demos locally

Please extract the zip file and run the project like any Angular CLI app. Make sure to have the Angular CLI installed.

For installation and usage, extract the zip file and open a terminal window and follow these steps.

Step 1. Run in root folder

$ npm install

Step 2. Start the app

$ ng serve --open

Let us know if we can help and enjoy! 👍

Thanks for downloading

Customize demos locally

We have set up a trial so that you can try the demos locally.

The easiest way to get started is to follow the installation steps and by grabbing the code directly from the demo page. Let us know if we can help and enjoy! 👍

You'll find a fully functional Kitchen-sink Ionic app in the zip file.

Thanks for downloading

Customize demos locally

We have set up a trial so that you can try the demos locally.

The demos are using Babel's in-browser ES6 and JSX transformer.
Extract the zip file and open the demo in your browser. To install Mobiscroll in your project follow instructions from this page.

Let us know if we can help and enjoy! 👍

Customize & try this demo locally

We have to set you up with a trial for this to run 👍

Already have an account? Sign in here.

Enter a new password and hit the button below to change it!

You are setting a password for the account

Scrollview for jQuery and jQuery Mobile

jQuery Scrollview Scrollview for jQuery and jQuery Mobile Scrollview for jQuery and jQuery Mobile

Hello

Sorry

Hotline Bling

What Do You Mean?

The Hills

Stitches

Love Yourself

Here

Like I'm Gonna Lose You

Same Old Love

679

Hallelujah

Gonna Know We Were Here

The Fix

I Know What You Did Last Summer

Me, Myself & I

Big Rings

When We Were Young

My House

Ex's & Oh's

Renegades

Stressed Out

Shut Up And Dance

Adventure Of A Lifetime

Irresistible

Uma Thurman

Everglow

Let It Go

Someone New

First

S.O.B.

Emperor's New Clothes

LA Devotee

2 Heads

Get Up

When I'm With You

Silverado

Button Legs

Can You Feel It

Initiate

All In

Forever And A Day

Juliet

Gone

Good Foot

Magic Men

Because Of You

A Better Man

Honey Girl

Etudes Tableaux

Piano Sonata in C Minor, K. 457

Fantasie-Impromptu Op. 66

Prelude in G Minor Op. 23

Moonlight Sonata Op. 27

Grande Valse Brilliante

Brahms

Sonata in B Minor

Diabelli Variations

Goldberg Variations

Lean On

Where Are U Now

Roses

How Deep Is Your Love

Hey Mama

Daddy

Dessert

You Know You Like It

Hold My Hand

Magnets

Sugar

Bang My Head

Be Right There

Something Better

Omen

Middle

Until You Were Gone

Scrollview - Paging

Scrollview - Cards