Top
ScrollContainer API - API
ScrollContainer API
Props (9)
Callback Props (7)
Styling Props (3)
Methods (2)
Below you can find a list of public props that the <ScrollContainer /> supports. Besides this list, the component also supports all standard DOM attributes - those are not explicitly mentioned here, with a few exceptions.
Boolean
default: false
Configures whether to always show the scroll track when the scroll thumb is visible.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      alwaysShowTrack: false,
      autoHide: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.alwaysShowTrack}
          onChange={(alwaysShowTrack) => this.setState({ alwaysShowTrack })}
        >
          Always show track
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>
      <ScrollContainer
        alwaysShowTrack={this.state.alwaysShowTrack}
        autoHide={this.state.autoHide}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Always show track - {this.state.alwaysShowTrack ? 'true' : 'false'} - content height: 2000px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
Boolean
default: true
Configures whether the scrollbars should hide when the mouse is not over the container.
If you want the scrollbars always visible, configure autoHide=false
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>
      <ScrollContainer
        autoHide={this.state.autoHide}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Auto-hide - {this.state.autoHide ? 'true' : 'false'} - content height: 2000px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
React.Node
default: undefined
The contents rendered inside the <ScrollContainer />. You can explicitly use the children prop or just put things between <ScrollContainer /> start/end tags.
import React from 'react'
import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

export default () => <ScrollContainer
  style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
>
  <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
    Content height: 2000px
  </div>
</ScrollContainer>
Number
default: 2
Specifies the margin (distance from the sides) of the scroll thumb.
By default, the same distance is used at the top/bottom (in case of vertical scrollbar) and left/right (in case of horizontal scrollbar) of the scrollbars, unless scrollThumbStartEndRespectMargin is specified false.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import Button from '@zippytech/react-toolkit/Button'

import '@zippytech/react-scroll-container-pro/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Button/index.css'

const scrollThumbMargins = [2, 5, 7, 10, 15, 20, 35].map((item) => {
  return {
    id: item,
    label: item + 'px'
  }
})

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: false,
      scrollThumbStartEndRespectMargin: true,
      innerContentHeight: 650,
      scrollThumbMargin: 2
    }

    this.scrollContainerRef = (s) => {
      this.scrollContainer = s
    }
  }

  adjustHeight(amount) {
    return () => {
      const innerContentHeight = Math.min(Math.max(0, this.state.innerContentHeight + amount), 20000)

      this.setState({
        innerContentHeight
      })
    }
  }

  render() {
    return <div>
      <CheckBox checked={this.state.autoHide} onChange={autoHide => {
        this.setState({
          autoHide
        })
      }}>Auto-hide scroll thumb</CheckBox>

      <p>Adjust scroll thumb margin: <ComboBox
        inlineFlex
        changeValueOnNavigation
        collapseOnSelect
        dataSource={scrollThumbMargins}
        value={this.state.scrollThumbMargin}
        onChange={(scrollThumbMargin) => this.setState({ scrollThumbMargin })}
      /></p>

      <CheckBox
        checked={this.state.scrollThumbStartEndRespectMargin}
        onChange={(scrollThumbStartEndRespectMargin) => {
          this.setState({
            scrollThumbStartEndRespectMargin
          })
        }}
      >
      Respect scroll thumb margin
      </CheckBox>

      <Button onClick={this.adjustHeight(100)} style={{ marginTop: 20}}>
        Increment inner content height ( += 100px)
      </Button>
      <Button onClick={this.adjustHeight(-100)}  style={{ marginTop: 20}}>
        Decrement inner content height ( -= 100px)
      </Button>

      <Button onClick={() => this.scrollContainer.scrollTop = 0}  style={{ marginTop: 20}}>
        Scroll to top
      </Button>

      <ScrollContainer
        ref={this.scrollContainerRef}
        autoHide={this.state.autoHide}
        scrollThumbRadius={this.state.scrollThumbRadius}
        scrollThumbWidth={this.state.scrollThumbWidth}
        scrollThumbMargin={this.state.scrollThumbMargin}
        scrollThumbStartEndRespectMargin={this.state.scrollThumbStartEndRespectMargin}
        style={{ marginTop: 50, height: 500, padding: 20, border: '1px solid gray'}}
      >
        <div style={{ border: '1px dotted red', height: this.state.innerContentHeight, width: 4000}}>
          Content height: {this.state.innerContentHeight}px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
Number
default: 10
Specifies the width of the scroll thumb, when the mouse is over the scroll track.
For the width of the scroll thumb & track-bar when the mouse is not over the scroll track, see scrollThumbWidth
For the radius of the scroll thumb, see scrollThumbRadius
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import Button from '@zippytech/react-toolkit/Button'

import '@zippytech/react-scroll-container-pro/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Button/index.css'

const scrollThumbWidths = [2, 5, 7, 10, 15, 20, 35, 50].map((item) => {
  return {
    id: item,
    label: item + 'px'
  }
})

const scrollThumbOverWidths = [2, 5, 7, 10, 15, 20, 35, 50, 70].map((item) => {
  return {
    id: item,
    label: item + 'px'
  }
})

const scrollThumbRadiusValues = [0, 2, 5, 7, 10].map((item) => {
  return {
    id: item,
    label: item + 'px'
  }
})

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: false,
      scrollThumbRadius: 3,
      scrollThumbWidth: 7,
      scrollThumbOverWidth: 10,
      innerContentHeight: 650,
    }
  }

  adjustHeight(amount) {
    return () => {
      const innerContentHeight = Math.min(Math.max(0, this.state.innerContentHeight + amount), 20000)

      this.setState({
        innerContentHeight
      })
    }
  }

  render() {
    return <div>
      <p>Adjust scroll thumb OVER width: <ComboBox
        inlineFlex
        changeValueOnNavigation
        collapseOnSelect
        dataSource={scrollThumbOverWidths}
        value={this.state.scrollThumbOverWidth}
        onChange={(scrollThumbOverWidth) => this.setState({ scrollThumbOverWidth })}
      /></p>

      <p>Adjust scroll thumb normal width: <ComboBox
        inlineFlex
        changeValueOnNavigation
        collapseOnSelect
        dataSource={scrollThumbWidths}
        value={this.state.scrollThumbWidth}
        onChange={(scrollThumbWidth) => this.setState({ scrollThumbWidth })}
      /></p>

      <CheckBox checked={this.state.autoHide} onChange={autoHide => {
        this.setState({
          autoHide
        })
      }}>Auto-hide scroll thumb</CheckBox>

      <p>Adjust scroll thumb radius: <ComboBox
        inlineFlex
        changeValueOnNavigation
        collapseOnSelect
        dataSource={scrollThumbRadiusValues}
        value={this.state.scrollThumbRadius}
        onChange={(scrollThumbRadius) => this.setState({ scrollThumbRadius })}
      /></p>

      <Button onClick={this.adjustHeight(100)} style={{ marginTop: 20}}>
        Increment inner content height ( += 100px)
      </Button>

      <Button onClick={this.adjustHeight(-100)}  style={{ marginTop: 20}}>
        Decrement inner content height ( -= 100px)
      </Button>

      <ScrollContainer
        autoHide={this.state.autoHide}
        scrollThumbRadius={this.state.scrollThumbRadius}
        scrollThumbWidth={this.state.scrollThumbWidth}
        scrollThumbOverWidth={this.state.scrollThumbOverWidth}

        style={{ marginTop: 50, height: 300, padding: 20, border: '1px solid gray'}}
      >
        <div style={{ border: '1px dotted red', height: this.state.innerContentHeight, width: 4000}}>
          Content height: {this.state.innerContentHeight}px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
Number
default: 3
Specifies the radius of the scroll thumb.
For the width of the scroll thumb, see scrollThumbWidth
For the width of the scroll thumb & track-bar when the mouse is over the scroll track, see scrollThumbOverWidth
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import Button from '@zippytech/react-toolkit/Button'

import '@zippytech/react-scroll-container-pro/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Button/index.css'

const scrollThumbWidths = [2, 5, 7, 10, 15, 20, 35, 50].map((item) => {
  return {
    id: item,
    label: item + 'px'
  }
})

const scrollThumbRadiusValues = [0, 2, 5, 7, 10].map((item) => {
  return {
    id: item,
    label: item + 'px'
  }
})

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: false,
      scrollThumbRadius: 3,
      scrollThumbWidth: 7,
      innerContentHeight: 650,
    }
  }

  adjustHeight(amount) {
    return () => {
      const innerContentHeight = Math.min(Math.max(0, this.state.innerContentHeight + amount), 20000)

      this.setState({
        innerContentHeight
      })
    }
  }

  render() {
    return <div>
      <p>Adjust scroll thumb width: <ComboBox
        inlineFlex
        changeValueOnNavigation
        collapseOnSelect
        dataSource={scrollThumbWidths}
        value={this.state.scrollThumbWidth}
        onChange={(scrollThumbWidth) => this.setState({ scrollThumbWidth })}
      /></p>

      <CheckBox checked={this.state.autoHide} onChange={autoHide => {
        this.setState({
          autoHide
        })
      }}>Auto-hide scroll thumb</CheckBox>

      <p>Adjust scroll thumb radius: <ComboBox
        inlineFlex
        changeValueOnNavigation
        collapseOnSelect
        dataSource={scrollThumbRadiusValues}
        value={this.state.scrollThumbRadius}
        onChange={(scrollThumbRadius) => this.setState({ scrollThumbRadius })}
      /></p>

      <Button onClick={this.adjustHeight(100)} style={{ marginTop: 20}}>
        Increment inner content height ( += 100px)
      </Button>

      <Button onClick={this.adjustHeight(-100)}  style={{ marginTop: 20}}>
        Decrement inner content height ( -= 100px)
      </Button>

      <ScrollContainer
        autoHide={this.state.autoHide}
        scrollThumbRadius={this.state.scrollThumbRadius}
        scrollThumbWidth={this.state.scrollThumbWidth}

        style={{ marginTop: 50, height: 300, padding: 20, border: '1px solid gray'}}
      >
        <div style={{ border: '1px dotted red', height: this.state.innerContentHeight, width: 4000}}>
          Content height: {this.state.innerContentHeight}px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
When set to true, the top/bottom (in case of vertical scrollbar) and left/right (in case of horizontal scrollbar) of the scrollbars has the size size as the scrollThumbMargin.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import Button from '@zippytech/react-toolkit/Button'

import '@zippytech/react-scroll-container-pro/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Button/index.css'

const scrollThumbMargins = [2, 5, 7, 10, 15, 20, 35].map((item) => {
  return {
    id: item,
    label: item + 'px'
  }
})

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: false,
      scrollThumbStartEndRespectMargin: true,
      innerContentHeight: 650,
      scrollThumbMargin: 2
    }

    this.scrollContainerRef = (s) => {
      this.scrollContainer = s
    }
  }

  adjustHeight(amount) {
    return () => {
      const innerContentHeight = Math.min(Math.max(0, this.state.innerContentHeight + amount), 20000)

      this.setState({
        innerContentHeight
      })
    }
  }

  render() {
    return <div>
      <CheckBox checked={this.state.autoHide} onChange={autoHide => {
        this.setState({
          autoHide
        })
      }}>Auto-hide scroll thumb</CheckBox>

      <p>Adjust scroll thumb margin: <ComboBox
        inlineFlex
        changeValueOnNavigation
        collapseOnSelect
        dataSource={scrollThumbMargins}
        value={this.state.scrollThumbMargin}
        onChange={(scrollThumbMargin) => this.setState({ scrollThumbMargin })}
      /></p>

      <CheckBox
        checked={this.state.scrollThumbStartEndRespectMargin}
        onChange={(scrollThumbStartEndRespectMargin) => {
          this.setState({
            scrollThumbStartEndRespectMargin
          })
        }}
      >
        Respect scroll thumb margin
      </CheckBox>

      <Button onClick={this.adjustHeight(100)} style={{ marginTop: 20}}>
        Increment inner content height ( += 100px)
      </Button>
      <Button onClick={this.adjustHeight(-100)}  style={{ marginTop: 20}}>
        Decrement inner content height ( -= 100px)
      </Button>

      <Button onClick={() => this.scrollContainer.scrollTop = 0}  style={{ marginTop: 20}}>
        Scroll to top
      </Button>

      <ScrollContainer
        ref={this.scrollContainerRef}
        autoHide={this.state.autoHide}
        scrollThumbRadius={this.state.scrollThumbRadius}
        scrollThumbWidth={this.state.scrollThumbWidth}
        scrollThumbMargin={this.state.scrollThumbMargin}
        scrollThumbStartEndRespectMargin={this.state.scrollThumbStartEndRespectMargin}
        style={{ marginTop: 50, height: 500, padding: 20, border: '1px solid gray'}}
      >
        <div style={{ border: '1px dotted red', height: this.state.innerContentHeight, width: 4000}}>
          Content height: {this.state.innerContentHeight}px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
Number
default: 7
Specifies the width of the scroll thumb.
For the width of the scroll thumb & track-bar when the mouse is over the scroll track, see scrollThumbOverWidth
For the radius of the scroll thumb, see scrollThumbRadius
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import Button from '@zippytech/react-toolkit/Button'

import '@zippytech/react-scroll-container-pro/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Button/index.css'

const scrollThumbWidths = [2, 5, 7, 10, 15, 20, 35, 50].map((item) => {
  return {
    id: item,
    label: item + 'px'
  }
})

const scrollThumbRadiusValues = [0, 2, 5, 7, 10].map((item) => {
  return {
    id: item,
    label: item + 'px'
  }
})

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: false,
      scrollThumbRadius: 3,
      scrollThumbWidth: 7,
      innerContentHeight: 650,
    }
  }

  adjustHeight(amount) {
    return () => {
      const innerContentHeight = Math.min(Math.max(0, this.state.innerContentHeight + amount), 20000)

      this.setState({
        innerContentHeight
      })
    }
  }

  render() {
    return <div>
      <p>Adjust scroll thumb width: <ComboBox
        inlineFlex
        changeValueOnNavigation
        collapseOnSelect
        dataSource={scrollThumbWidths}
        value={this.state.scrollThumbWidth}
        onChange={(scrollThumbWidth) => this.setState({ scrollThumbWidth })}
      /></p>

      <CheckBox checked={this.state.autoHide} onChange={autoHide => {
        this.setState({
          autoHide
        })
      }}>Auto-hide scroll thumb</CheckBox>

      <p>Adjust scroll thumb radius: <ComboBox
        inlineFlex
        changeValueOnNavigation
        collapseOnSelect
        dataSource={scrollThumbRadiusValues}
        value={this.state.scrollThumbRadius}
        onChange={(scrollThumbRadius) => this.setState({ scrollThumbRadius })}
      /></p>

      <Button onClick={this.adjustHeight(100)} style={{ marginTop: 20}}>
        Increment inner content height ( += 100px)
      </Button>

      <Button onClick={this.adjustHeight(-100)}  style={{ marginTop: 20}}>
        Decrement inner content height ( -= 100px)
      </Button>

      <ScrollContainer
        autoHide={this.state.autoHide}
        scrollThumbRadius={this.state.scrollThumbRadius}
        scrollThumbWidth={this.state.scrollThumbWidth}

        style={{ marginTop: 50, height: 300, padding: 20, border: '1px solid gray'}}
      >
        <div style={{ border: '1px dotted red', height: this.state.innerContentHeight, width: 4000}}>
          Content height: {this.state.innerContentHeight}px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
Boolean
default: true
Configures whether the scroll track should be visible when dragging the scroll thumb with the mouse.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showTrackOnDrag: true,
      autoHide: false
    }
  }

  render() {
    return <div>
    <div style={{ marginBottom: 20 }}>
      <p>When you test this, make sure that when you drag the thumb, you move the mouse outside the scroll track.
      </p>
        <CheckBox
          checked={this.state.showTrackOnDrag}
          onChange={(showTrackOnDrag) => this.setState({ showTrackOnDrag })}
        >
          Show track on drag
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>
      <ScrollContainer
        showTrackOnDrag={this.state.showTrackOnDrag}
        autoHide={this.state.autoHide}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Show track on drag - {this.state.showTrackOnDrag ? 'true' : 'false'} - content height: 2000px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
Fn({ scrollTop, scrollLeft})
default: undefined
The function will be called when the <ScrollContainer /> is scrolled.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>
      <ScrollContainer
        autoHide={this.state.autoHide}
        onContainerScroll={({scrollTop, scrollLeft}) => {
          console.log({ scrollTop, scrollLeft })
        }}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Open console to see logs on scroll - content height: 2000px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
Fn(scrollLeft: Number)
default: undefined
The function will be called when the <ScrollContainer /> is scrolled horizontally.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>
      <ScrollContainer
        autoHide={this.state.autoHide}
        onContainerScrollHorizontal={scrollLeft => {
          console.log({ scrollLeft })
        }}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Open console to see logs on scroll - content height: 2000px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
Fn(scrollLeft: Number)
default: undefined
The function will be called when the <ScrollContainer /> reaches the max horizontal scroll position.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: true
    }
  }

  onScrollMax(scrollLeft) {
    zippy.notification.first.addNotification({
      title: 'Scroll left max',
      content: 'scrollLeft (max) value is: ' + scrollLeft + ' px.'
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>
      <ScrollContainer
        autoHide={this.state.autoHide}
        onContainerScrollHorizontalMax={scrollLeft => {
          this.onScrollMax(scrollLeft)
        }}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Open console to see logs on scroll - content height: 2000px
        </div>
      </ScrollContainer>

      <NotificationBoard id="first" />
    </div>
  }
}
export default () => <App />
Fn(scrollLeft: Number)
default: undefined
The function will be called when the <ScrollContainer /> reaches the min horizontal scroll position.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: true
    }
  }

  onScrollMin(scrollLeft) {
    zippy.notification.first.addNotification({
      title: 'Scroll left min',
      content: 'scrollLeft value is: ' + scrollLeft + ' px.'
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>
      <ScrollContainer
        autoHide={this.state.autoHide}
        onContainerScrollHorizontalMin={scrollLeft => {
          this.onScrollMin(scrollLeft)
        }}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Open console to see logs on scroll - content height: 2000px
        </div>
      </ScrollContainer>

      <NotificationBoard id="first" />
    </div>
  }
}
export default () => <App />
Fn(scrollTop: Number)
default: undefined
The function will be called when the <ScrollContainer /> is scrolled vertically.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>
      <ScrollContainer
        autoHide={this.state.autoHide}
        onContainerScrollVertical={scrollTop => {
          console.log({ scrollTop })
        }}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Open console to see logs on scroll - content height: 2000px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
Fn(scrollTop: Number)
default: undefined
The function will be called when the <ScrollContainer /> reaches the max vertical scroll position.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: true
    }
  }

  onScrollMax(scrollTop) {
    zippy.notification.first.addNotification({
      title: 'Scroll top max',
      content: 'scrollTop (max) value is: ' + scrollTop + ' px.'
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>
      <ScrollContainer
        autoHide={this.state.autoHide}
        onContainerScrollVerticalMax={scrollTop => {
          this.onScrollMax(scrollTop)
        }}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Open console to see logs on scroll - content height: 2000px
        </div>
      </ScrollContainer>

      <NotificationBoard id="first" />
    </div>
  }
}
export default () => <App />
Fn(scrollTop: Number)
default: undefined
The function will be called when the <ScrollContainer /> reaches the min vertical scroll position.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      autoHide: true
    }
  }

  onScrollMin(scrollTop) {
    zippy.notification.first.addNotification({
      title: 'Scroll top min',
      content: 'scrollTop value is: ' + scrollTop + ' px.'
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>
      <ScrollContainer
        autoHide={this.state.autoHide}
        onContainerScrollVerticalMin={scrollTop => {
          this.onScrollMin(scrollTop)
        }}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Open console to see logs on scroll - content height: 2000px
        </div>
      </ScrollContainer>

      <NotificationBoard id="first" />
    </div>
  }
}
export default () => <App />
String
default: undefined
A className to be applied to the <ScrollContainer />. The passed value is appended to other classNames that the <ScrollContainer /> adds by default.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

class App extends React.Component {
  render() {
    return <ScrollContainer
      className="global-scroll-container-pink-background"
      style={{ maxWidth: 200, maxHeight: 200, padding: 5 }}
    >
      <div style={{ border: '2px dotted gray', height: 2000, width: 4000}}>
        Content height: 2000px
      </div>
    </ScrollContainer>
  }
}
export default () => <App />
Object
default: undefined
Specifies a style object for the scroll thumb.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-scroll-container-pro/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

const redStyle = {
  background: '#ff4d4d'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showRed: false,
      autoHide: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.showRed}
          onChange={(showRed) => this.setState({ showRed })}
        >
          Red scroll thumb
        </CheckBox>
      </div>

      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.autoHide}
          onChange={(autoHide) => this.setState({ autoHide })}
        >
          Auto-hide
        </CheckBox>
      </div>

      <ScrollContainer
        autoHide={this.state.autoHide}
        scrollThumbStyle={this.state.showRed? redStyle : null }
        style={{ marginTop: 50, height: 300, padding: 20, border: '1px solid gray'}}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Content height: 2000px
        </div>
      </ScrollContainer>
    </div>
  }
}
export default () => <App />
Object
default: undefined
A style object to be applied to the <ScrollContainer />.
import React from 'react'

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

class App extends React.Component {
  render() {
    return <ScrollContainer
      style={{ maxWidth: 200, maxHeight: 200, border: '2px solid gray', padding: 5 }}
    >
      <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
        Content height: 2000px
      </div>
    </ScrollContainer>
  }
}
export default () => <App />
Fn()
undefined
Scrolls the <DataGrid /> horizontally.
Although this is listed under the methods list, it should be used as a getter/setter for reading/setting the scroll position for the <DataGrid />.
import React from 'react'
import ScrollContainer from '@zippytech/react-scroll-container-pro'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'

import '@zippytech/react-scroll-container-pro/index.css'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.refScroller = (s) => {
      this.scroller = s
    }

    this.state = {
      value: 100
    }
  }

  scrollToLeft() {
    this.scroller.scrollLeft = this.state.value
  }

  readScrollValue() {
    zippy.notification.first.addNotification({
      title: 'Scroll top (getter)',
      content: 'Current scrolled value is: ' + this.scroller.scrollLeft + ' px.'
    })
  }

  render() {
    return <div>
      <p>
        Set how much to scroll:{' '}
        <NumericInput
          style={{ width: 80 }}
          minValue={1}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />{' '}
        <Button
          style={{ height: 30, borderRadius: 3 }}
          onClick={() => this.scrollToLeft()}
        >
          Scroll left (setter)
        </Button>{' '}
      </p>
      <p>
        When you press the getter button bellow, a notification will appear to show the scrolled value.
      </p>
      <div style={{marginBottom: 20}}>
        Get how much is scrolled:{' '}
        <Button
          style={{ height: 30, borderRadius: 3 }}
          onClick={() => this.readScrollValue()}
        >
          Scroll left (getter)
        </Button>
      </div>
      <ScrollContainer
        ref={this.refScroller}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Content height: 2000px
        </div>
      </ScrollContainer>
      <NotificationBoard id="first" />
    </div>
  }
}

export default () => <App />
Fn()
undefined
Scrolls the <DataGrid /> vertically.
Although this is listed under the methods list, it should be used as a getter/setter for reading/setting the scroll position for the <DataGrid />.
import React from 'react'
import ScrollContainer from '@zippytech/react-scroll-container-pro'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import Button from '@zippytech/react-toolkit/Button'
import NotificationBoard from '@zippytech/react-toolkit/Notification'

import '@zippytech/react-scroll-container-pro/index.css'
import '@zippytech/react-toolkit/NumericInput/index.css'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.refScroller = (s) => {
      this.scroller = s
    }

    this.state = {
      value: 100
    }
  }

  scrollToTop() {
    this.scroller.scrollTop = this.state.value
  }

  readScrollValue() {
    zippy.notification.first.addNotification({
      title: 'Scroll top (getter)',
      content: 'Current scrolled value is: ' + this.scroller.scrollTop + ' px.'
    })
  }

  render() {
    return <div>
      <p>
        Set how much to scroll:{' '}
        <NumericInput
          style={{ width: 80 }}
          minValue={1}
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
        />{' '}
        <Button
          style={{ height: 30, borderRadius: 3 }}
          onClick={() => this.scrollToTop()}
        >
          Scroll top (setter)
        </Button>{' '}
      </p>
      <p>
        When you press the getter button bellow, a notification will appear to show the scrolled value.
      </p>
      <div style={{marginBottom: 20}}>
        Get how much is scrolled:{' '}
        <Button
          style={{ height: 30, borderRadius: 3 }}
          onClick={() => this.readScrollValue()}
        >
          Scroll top (getter)
        </Button>
      </div>
      <ScrollContainer
        ref={this.refScroller}
        style={{ maxWidth: 200, maxHeight: 200, border: '1px solid gray', padding: 5 }}
      >
        <div style={{ border: '1px dotted red', height: 2000, width: 4000}}>
          Content height: 2000px
        </div>
      </ScrollContainer>
      <NotificationBoard id="first" />
    </div>
  }
}

export default () => <App />