Scrollable

Default example

To style the scrollbar simply replace your block level element with the Scrollable component.

There's not a thing in the world wrong with washing your brush. With practice comes confidence. Don't be afraid to make these big decisions. Once you start, they sort of just make themselves.

You can't have light without dark. You can't know happiness unless you've known sorrow. See. We take the corner of the brush and let it play back-and-forth. Every day I learn. If we're gonna walk though the woods, we need a little path. We don't need any guidelines or formats. All we need to do is just let it flow right out of us.

Let's make a nice big leafy tree. Let's go up in here, and start having some fun God gave you this gift of imagination. Use it. Life is too short to be alone, too precious. Share it with a friend.

I get carried away with this brush cleaning. What the devil. It just happens - whether or not you worried about it or tried to plan it. Imagination is the key to painting.

Use absolutely no pressure. Just like an angel's wing. We'll put some happy little leaves here and there. You don't have to spend all your time thinking about what you're doing, you just let it happen. Just let your mind wander and enjoy. This should make you happy.

Very easy to work these to death. Just a happy little shadow that lives in there. There are no mistakes. You can fix anything that happens. But they're very easily killed. Clouds are delicate.

We'll throw some happy little limbs on this tree. You better get your coat out, this is going to be a cold painting. The only thing worse than yellow snow is green snow.

import { P } from '@pluralsight/ps-design-system-text'
import Scrollable from '@pluralsight/ps-design-system-scrollable'
import React from 'react'
const Example: React.FC = props => {
return (
<Scrollable style={{ height: 164, outline: '1px dashed pink' }}>
<P>
There's not a thing in the world wrong with washing your brush. With
practice comes confidence. Don't be afraid to make these big decisions.
Once you start, they sort of just make themselves.
</P>
<P>
You can't have light without dark. You can't know happiness unless
you've known sorrow. See. We take the corner of the brush and let it
play back-and-forth. Every day I learn. If we're gonna walk though the
woods, we need a little path. We don't need any guidelines or formats.
All we need to do is just let it flow right out of us.
</P>
<P>
Let's make a nice big leafy tree. Let's go up in here, and start having
some fun God gave you this gift of imagination. Use it. Life is too
short to be alone, too precious. Share it with a friend.
</P>
<P>
I get carried away with this brush cleaning. What the devil. It just
happens - whether or not you worried about it or tried to plan it.
Imagination is the key to painting.
</P>
<P>
Use absolutely no pressure. Just like an angel's wing. We'll put some
happy little leaves here and there. You don't have to spend all your
time thinking about what you're doing, you just let it happen. Just let
your mind wander and enjoy. This should make you happy.
</P>
<P>
Very easy to work these to death. Just a happy little shadow that lives
in there. There are no mistakes. You can fix anything that happens. But
they're very easily killed. Clouds are delicate.
</P>
<P>
We'll throw some happy little limbs on this tree. You better get your
coat out, this is going to be a cold painting. The only thing worse than
yellow snow is green snow.
</P>
</Scrollable>
)
}
export default Example

Customize content html with render prop

Instead of rendering the default div, you can render with your own semantic markup.

import { P } from '@pluralsight/ps-design-system-text'
import Scrollable from '@pluralsight/ps-design-system-scrollable'
import React from 'react'
const Example: React.FC = props => {
return (
<Scrollable
renderContent={(contentProps, contentRef) => <aside {...contentProps} ref={contentRef} />}
style={{ height: 164, outline: '1px dashed pink' }}
>
<P>
There's not a thing in the world wrong with washing your brush. With
practice comes confidence. Don't be afraid to make these big decisions.
Once you start, they sort of just make themselves.
</P>
<P>
You can't have light without dark. You can't know happiness unless
you've known sorrow. See. We take the corner of the brush and let it
play back-and-forth. Every day I learn. If we're gonna walk though the
woods, we need a little path. We don't need any guidelines or formats.
All we need to do is just let it flow right out of us.
</P>
<P>
Let's make a nice big leafy tree. Let's go up in here, and start having
some fun God gave you this gift of imagination. Use it. Life is too
short to be alone, too precious. Share it with a friend.
</P>
<P>
I get carried away with this brush cleaning. What the devil. It just
happens - whether or not you worried about it or tried to plan it.
Imagination is the key to painting.
</P>
<P>
Use absolutely no pressure. Just like an angel's wing. We'll put some
happy little leaves here and there. You don't have to spend all your
time thinking about what you're doing, you just let it happen. Just let
your mind wander and enjoy. This should make you happy.
</P>
<P>
Very easy to work these to death. Just a happy little shadow that lives
in there. There are no mistakes. You can fix anything that happens. But
they're very easily killed. Clouds are delicate.
</P>
<P>
We'll throw some happy little limbs on this tree. You better get your
coat out, this is going to be a cold painting. The only thing worse than
yellow snow is green snow.
</P>
</Scrollable>
)
}
export default Example

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-scrollable
  • Import
    import Scrollable from '@pluralsight/ps-design-system-scrollable'
Name
Type
Description
Default
renderContent
(props: { children: React.ReactNode, onScroll: React.UIEventHandler, [cssSelector: string]: '' }, ref: React.Ref) => React.ReactNode
Scrollable content render prop
Renders as a div
children
Required
React.ReactNode
Content to make scrollable