ScrollView Configuration

An object defining configuration options for the dxScrollView widget.

animationEnabled

A Boolean value specifying whether to enable or disable widget animation.

Type: Boolean
Default Value: true

bounceEnabled

A Boolean value specifying whether to enable or disable the bounce-back effect.

Type: bounceEnabled
Default Value: true

If the option is set to true, you can scroll the widget content up (down) even if you have reached the bottom (top) bound. But when you release the content, it returns to the bound position. If the option value is false, you can scroll the widget content until you reach the bound.

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { bounceEnabled: enableBounce }">
  <div id="textContainer"></div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width:70%" class="dx-field-label">Bounce enabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: enableBounce }"></div>
  </div>
</div>
enableBounce = ko.observable(true);

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
p{
  padding: 5px 10px;
  margin: 0;
}
.content{
  height: 100%;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

direction

A string value specifying the available scrolling directions.

Type: String
Default Value: "vertical"
Accepted Values: 'vertical'|'horizontal'|'both'

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { direction: scrollingDirection }">
  <div id="textContainer"></div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Direction</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: directions, value: scrollingDirection }"></div>
  </div>
</div>
//Available directions
directions = [
  "vertical",
  "horizontal",
  "both"
];

scrollingDirection = ko.observable(directions[0]);

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
p{
  padding: 5px 10px;
  margin: 0;
}
.content{
  height: 100%;
}
.dx-scrollable-content{
    width: 200%;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

disabled

A Boolean value specifying whether or not a component can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the component at runtime.

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { disabled: scrollViewDisabled }">
  <div id="textContainer"></div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Disabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: scrollViewDisabled }"></div>
  </div>
</div>
scrollViewDisabled = ko.observable(false);

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

endAction

An action performed after the scrolling of widget content has completed.

Type: Action
Default Value: null

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { endAction: endActionFunction }">
  <div id="textContainer"></div>
</div><br/>
//Shows the "scrolling completed" notification
endActionFunction = function () {
  DevExpress.ui.dialog.alert("Scrolling is completed", "Action executed");
};

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

inertiaAction

An action performed after a user drags and releases widget content so that inertia comes into effect.

Type: Action
Default Value: null

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { inertiaAction: inertiaActionFunction }">
  <div id="textContainer"></div>
</div><br/>
//Shows the "inertia" notification
inertiaActionFunction = function () {
  DevExpress.ui.dialog.alert("Inertia has come into effect", "Action executed");
};

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

inertiaEnabled

A Boolean value specifying whether the inertia effect is enabled or disabled.

Type: Boolean
Default Value: true

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { inertiaEnabled: enableInertia }">
  <div id="textContainer"></div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width:70%" class="dx-field-label">Inertia enabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: enableInertia }"></div>
  </div>
</div>
enableInertia = ko.observable(true);

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
p{
  padding: 5px 10px;
  margin: 0;
}
.content{
  height: 100%;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

pullDownAction

An action performed after the widget is scrolled to the top and pulled down.

Type: Action
Default Value: null

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { pullDownAction: pullDownActionFunction }">
  <div id="textContainer"></div>
</div><br/>
//Shows the "pulled down" notification and releases the scroll view
pullDownActionFunction = function (actionOptions) {
  DevExpress.ui.dialog.alert("The widget has been pulled down", "Action executed");
  actionOptions.component.release();
};

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

reachBottomAction

An action performed after the widget is scrolled to the bottom and pulled up.

Type: Action
Default Value: null

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { reachBottomAction: reachBottomActionFunction }">
  <div id="textContainer"></div>
</div><br/>
//Shows the "bottom reached" notification and releases the scroll view
reachBottomActionFunction = function (actionOptions) {
  DevExpress.ui.dialog.alert("You have reached the widget bottom", "Action executed");
  actionOptions.component.release();
};

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

scrollAction

An action performed on each scroll gesture.

Type: Action
Default Value: null

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { scrollAction: scrollActionFunction }">
  <div id="textContainer"></div>
</div><br/>
//Shows the "start scrolling" notification
scrollActionFunction = function () {
  DevExpress.ui.dialog.alert("Scrolling has been started", "Action executed");
};

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

scrollByContent

A Boolean value specifying whether scrolling by content is enabled or disabled.

Type: Boolean
Default Value: true

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { scrollByContent: scrollByContentEnabled }">
  <div id="textContainer"></div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width:70%" class="dx-field-label">Scroll by content</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: scrollByContentEnabled }"></div>
  </div>
</div>
scrollByContentEnabled = ko.observable(true);

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

scrollByThumb

A Boolean value specifying whether scrolling by scrollbar is enabled or disabled.

Type: Boolean
Default Value: false

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { scrollByThumb: scrollByThumbEnabled }">
  <div id="textContainer"></div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width:70%" class="dx-field-label">Scroll by thumb</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: scrollByThumbEnabled }"></div>
  </div>
</div>
scrollByThumbEnabled = ko.observable(false);

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

showScrollBar

A Boolean value specifying whether or not the scrollbar is visible.

Type: Boolean
Default Value: true

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { showScrollbar: scrollbarVisible }">
  <div id="textContainer"></div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width: 70%" class="dx-field-label">Show scroll bar</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: scrollbarVisible }"></div>
  </div>
</div>
scrollbarVisible = ko.observable(true);

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

startAction

An action performed before scrolling widget content.

Type: Action
Default Value: null

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { startAction: startActionFunction }">
    <div id="textContainer"></div>
</div><br/>
//Shows the "start scrolling" notification
startActionFunction = function () {
  DevExpress.ui.dialog.alert("Scrolling is about to be started", "Action executed");
};

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

stopAction

An action performed after the scrolling of widget content is stopped by a user.

Type: Action
Default Value: null

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { stopAction: stopActionFunction }">
    <div id="textContainer"></div>
</div><br/>
//Shows the "scrolling stopped" notification
stopActionFunction = function () {
  DevExpress.ui.dialog.alert("Scrolling has been stopped", "Action executed");
};

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

updateAction

An action performed after the widget is updated.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Resize scroll view', clickAction: resizeScrollView }"></div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Update</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: updateScrollView }"></div>
  </div>
</div>
<div id="scrollView" style="background-color:lightGray; color: black;" data-bind="dxScrollView: { updateAction: scrollViewUpdated }">
  <div id="textContainer"></div>
</div><br/>
updateScrollView = ko.observable(false);
scrollViewHeight = 30;

//Shows the "widget updated" notification
scrollViewUpdated = function () {
  DevExpress.ui.notify("Scroll view has been updated", "info", 500);
};

//Changes the scroll view height
resizeScrollView = function () {
  if (scrollViewHeight >= 70) {
    scrollViewHeight = 30;
    setTimeout(scrollToEnd, 500);
  }
  else
    scrollViewHeight += 10;
  $("#scrollView").css({ height: scrollViewHeight + '%' });
  if (updateScrollView())
    $("#scrollView").dxScrollView("instance").update(true);
};

//Scrolls the widget content to the bottom
scrollToEnd = function () {
  $("#scrollView").dxScrollView("instance").scrollTo($(".dx-scrollview-content").height() - $(".dx-scrollview").height(), true);
};

//Loads the scroll view content
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
setTimeout(scrollToEnd, 500);
body{
  text-align: center;
}
.button{
  margin:10px;
}
#scrollView{
  margin: 10px;
  height: 30%;
}