Documentation

jQuery ScrollView Getting Started

jqxScrollView represents a widget which can be used for viewing content which is wider than the visible area outlined by the device's screen. Specific item can be chosen using drag movements or clicking/tapping on the buttons at the bottom of the jqxScrollView.

Quick start #

Package: jqwidgets-scripts
Files: 3 scripts, listed below
Demos: jQuery ScrollView demos
API: Properties, events and methods

jqxScrollView in its Default Functionality demo, with the Fluent theme — jqxScrollView in the Default Functionality demo, with the Fluent theme (Tailwind Dark in dark mode).

Load the styles and the ScrollView's scripts - from the jsDelivr CDN as here, or from node_modules/jqwidgets-scripts/jqwidgets/ after npm install jqwidgets-scripts. jQuery is optional: jqxcore.js works on its own.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@27/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@27/jqwidgets/styles/jqx.fluent.css">
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@27/jqwidgets/jqxcore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@27/jqwidgets/jqxscrollview.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@27/jqwidgets/jqxbuttons.js"></script>

Then create it on an element with $('#scrollView').jqxScrollView({ … }). The live demos show every option with its source code; the guide below explains them.

The first step is to create html page and add links to the javascript files and CSS dependencies to your project. The jqxScrollView plugin requires the following files:

<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script src="../../jqwidgets/jqxcore.js"></script>
    <script src="../../jqwidgets/jqxscrollview.js"></script>
</head>

The next step is to create a UL element within the body of the html document.

<div id="photoGallery">
    <div><div class="photo" style="background-image: url(../../images/nature1.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(../../images/nature2.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(../../images/nature3.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(../../images/nature4.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(../../images/nature5.jpg)"></div></div>
    <div><div class="photo" style="background-image: url(../../images/nature6.jpg)"></div></div>
</div>

The last step is to select the UL element and to build the widget by calling the jqxListMenu constructor.

<script>
    $(document).ready(function () {
        $('#photoGallery').jqxScrollView({ width: 600, height: 450 });
    });
</script>

To set a property (option), you need to pass the property name and value(s) in the jqxScrollView's constructor.

$("#element").jqxScrollView({ currentPage: 1 });

To get a property(option), you need to pass the property name to the jqxScrollView's constructor.

const currentPage = $("#element").jqxScrollView('currentPage');

Basic ScrollView Sample #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaScript ScrollView</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" />
    <script src="../../scripts/gettheme.js"></script>
    <script src="../../jqwidgets/jqxcore.js"></script>
    <script src="../../jqwidgets/jqxscrollview.js"></script>
    <script src="../../jqwidgets/jqxbuttons.js"></script>
    <script>
$(function () {
  const theme = getTheme();
  $('#photoGallery').jqxScrollView({ width: 600, height: 450, buttonsOffset: [0, 0], theme: theme });
  $('#StartBtn').jqxButton({ theme: theme });
  $('#StopBtn').jqxButton({ theme: theme });
  $('#StartBtn').click(function () {
    $('#photoGallery').jqxScrollView({ slideShow: true });
  });
  $('#StopBtn').click(function () {
    $('#photoGallery').jqxScrollView({ slideShow: false });
  });
});</script>
    <style type="text/css">
        .photo
        {
            width: 600px;
            height: 450px;
            background-color: #000;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body class="default">
    <div id="photoGallery">
        <div><div class="photo" style="background-image: url(../../images/nature1.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature2.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature3.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature4.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature5.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature6.jpg)"></div></div>
    </div>
    <div style='margin-top: 20px;'>
        <b>Settings</b>
        <br />
        <div>
            <input type="button" value="Start Slideshow" id="StartBtn" />
            <input type="button" value="Stop Slideshow" id="StopBtn" />
        </div>
    </div>
</body>
</html>

jQuery ScrollView Getting Started

Quick start #

Basic ScrollView Sample #

The result of the above code is: #