Scroll the Content Using JQuery Mobile

.ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
background-color: #0F6;
}

.ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
background-color: #FF6;
}

.threeByThree {
border: solid 1px black;
background-color: #999;
overflow: hidden;
width: 300px;
height: 300px;
}
.vertical
{
border: solid 1px black;
background-color: #999;
overflow: hidden;
width: 100px;
height: 200px;
}
.threeByThree > .ui-scrollview-view {
width: 1300px;
background-color: white;
}
.threeByThree .square {
float: left;
}
</style>

Step 4:

New create your body structure by creating some div's like below. Here you have one more option for your div i.e. data-role (page, header or content).

<div data-role="page">your sub div will go here</div>

In the above line we created a simple div tag having a data-role as page. Now create a sub div inside this div like header div and then the div which contains your content by specifiying data-role as content like below:

<div data-role="header">Header what you want</div>

Now create the div with data-role as a content like below.

<div data-role="content">your content div will go here</div>

Step 5:

Still we are at start-up only; now we will move to our actual content div structure so let's see the following code which you can write under content div.

<div data-role="content">
<div data-scroll="x" class="threeByThree">
<div class="square">C</div>
<div class="square">-</div>
<div class="square">S</div>
<div class="square">H</div>
<div class="square">R</div>
<div class="square">P</div>
<div class="square">C</div>
<div class="square">O</div>
<div class="square">R</div>
<div class="square">N</div>
<div class="square">E</div>
<div class="square">R</div>
</div>--End of scrolling div
</div>---End of content div

In the above lines we have created one content div and under that we have created a sub div having one more new attribute called data-scroll with x specifying the horizontal scrolling of the contents. In that we have created sub divs which contains only single characters as C-SHARPCORNER; this div will scroll our content horizontally; if you want it to scroll vertically then set the data-scroll to 'y'.

Step 6:

Now run you application and scroll the content by dragging your mouse.

Conclusion

In this way we can create the scrollable content for our website using j-query mobile.