Pull down to refresh...
Release to refresh...
Refreshing...
-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Box
- Responsive Box
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
-
Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
- Overview
-
Action Sheet
-
Button
- Floating Action Button
- Drop Down Button
-
Context Menu
-
List
-
Lookup
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Related Demos:
Your search did not match any results.
Loading...
React Scroll View
The ScrollView is a UI component that enables a user to scroll its content. This demo shows how to display the scrollbar within a container and how to update the ScrollView content.
Was this demo helpful?
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
x
import React, { useCallback, useRef, useState } from 'react';
import ScrollView, { ScrollViewTypes } from 'devextreme-react/scroll-view';
import SelectBox from 'devextreme-react/select-box';
import CheckBox, { CheckBoxTypes } from 'devextreme-react/check-box';
import service from './data.ts';
type UpdateContentArgs = ScrollViewTypes.PullDownEvent | ScrollViewTypes.ReachBottomEvent;
const showScrollBarModeLabel = { 'aria-label': 'Show Scrollbar Mode' };
let updateContentTimer;
const App = () => {
const [showScrollBarMode, setShowScrollBarMode] = useState<ScrollViewTypes.Properties['showScrollbar']>('onScroll');
const [pullDown, setPullDown] = useState(false);
const [scrollByContent, setScrollByContent] = useState(true);
const [scrollByThumb, setScrollByThumb] = useState(true);
const [content, setContent] = useState(service.getContent());
const scrollViewRef = useRef(null);
const updateContent = useCallback((args: UpdateContentArgs, eventName: string) => {
const updateContentText = `\n Content has been updated on the ${eventName} event.\n\n`;
if (updateContentTimer) {
clearTimeout(updateContentTimer);
}
updateContentTimer = setTimeout(() => {
setContent(eventName === 'PullDown' ? updateContentText + content : content + updateContentText);
args.component.release(false);
}, 500);
}, [content, setContent]);
const updateTopContent = useCallback((args: ScrollViewTypes.PullDownEvent) => {
updateContent(args, 'PullDown');
}, [updateContent]);
const updateBottomContent = useCallback((args: ScrollViewTypes.ReachBottomEvent) => {
updateContent(args, 'ReachBottom');
}, [updateContent]);
const pullDownValueChanged = useCallback((args: CheckBoxTypes.ValueChangedEvent) => {
setPullDown(args.value);
}, [setPullDown]);
const reachBottomValueChanged = useCallback((args: CheckBoxTypes.ValueChangedEvent) => {
scrollViewRef.current.instance().option('onReachBottom', args.value ? updateBottomContent : null);
}, [updateBottomContent]);
return (
<div id="scrollview-demo">
<ScrollView
id="scrollview"
ref={scrollViewRef}
reachBottomText="Updating..."
scrollByContent={scrollByContent}
bounceEnabled={pullDown}
onReachBottom={updateBottomContent}
onPullDown={updateTopContent}
showScrollbar={showScrollBarMode}
scrollByThumb={scrollByThumb}
>
<div className="text-content">{content}</div>
</ScrollView>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<span>Show scrollbar: </span>
<SelectBox
items={showScrollbarModes}
valueExpr="value"
inputAttr={showScrollBarModeLabel}
displayExpr="text"
value={showScrollBarMode}
onValueChange={setShowScrollBarMode}
/>
</div>
<div className="option">
<CheckBox
text="Update content on the ReachBottom event"
defaultValue={true}
onValueChanged={reachBottomValueChanged}
/>
</div>
<div className="option">
<CheckBox
text="Update content on the PullDown event"
value={pullDown}
onValueChanged={pullDownValueChanged}
/>
</div>
<div className="option">
<CheckBox
text="Scroll by content"
value={scrollByContent}
onValueChange={setScrollByContent}
/>
</div>
<div className="option">
<CheckBox
text="Scroll by thumb"
value={scrollByThumb}
onValueChange={setScrollByThumb}
/>
</div>
</div>
</div>
);
};
const showScrollbarModes = [
{
text: 'On Scroll',
value: 'onScroll',
},
{
text: 'On Hover',
value: 'onHover',
},
{
text: 'Always',
value: 'always',
},
{
text: 'Never',
value: 'never',
},
];
export default App;
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx