Properties

NameTypeDefault
disabled boolean false

Sets or gets whether the scrollbar is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} disabled={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
height string | number null

Sets or gets height of the scroll bar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
largestep number 50

Sets or gets the scrollbar's largestep. The value is increased/decreased with this largestep when the user presses the left mouse button in the area between a scrollbar button and thumb.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} largestep={100}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
min number 0

Sets or gets the scrollbar's minimum value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} min={20} value={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
max number 1000

Sets or gets the scrollbar's maximum value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} max={100} value={50}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rtl boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} rtl={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
step number 10

Sets or gets the scrollbar's step. The value is increased/decreased with this step when the user presses a scrollbar button.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} step={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showButtons boolean true

Sets or gets whether the scrollbar displays the increase and decrease arrow buttons.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} showButtons={false}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
thumbMinSize number 10

Specifies the scrollbar thumb's minimum size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} thumbMinSize={30}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
theme string ''
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} theme={'material'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
vertical boolean false

Sets or gets the scrollbar's orientation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={20} height={180} vertical={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
value number 0

Sets or gets the scrollbar's value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20} value={200}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width string | number null

Sets or gets width of the scroll bar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

valueChanged Event

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event of jqxScrollBar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public render() {
return (
<JqxScrollBar ref={this.myScrollBar} onValueChanged={this.onValueChanged}
width={180} height={20}
/>
);
}
private onValueChanged(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
destroy None

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public componentDidMount(): void {
this.myScrollBar.current!.destroy();
}
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
isScrolling None

Returns true, if the user is scrolling. Otherwise, returns false.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public componentDidMount(): void {
this.myScrollBar.current!.isScrolling();
}
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
setPosition index

Sets the thumb's position

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollBar, { IScrollBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollbar';
class App extends React.PureComponent<{}, IScrollBarProps> {
private myScrollBar = React.createRef<JqxScrollBar>();
public componentDidMount(): void {
this.myScrollBar.current!.setPosition(10);
}
public render() {
return (
<JqxScrollBar ref={this.myScrollBar}
width={180} height={20}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);