idiotwu / react-smooth-scrollbar

[Not Actively Maintained] A wrapper for smooth-scrollbar to React Component

Hello there! This is Daofeng Wu (a.k.a. Dolphin Wood).

Specs >

• Focused on unleashing the potential of the Web.
• 🙈 Also exploring the secrets of CV, CG, and game development.
• 💻 Write code to satisfy myself solve problems.
• 🤗 Open to any new ideas! (Currently building autonomous agents with LLMs.)
• 🐾 Find some of my creative works on CodePen and StackBlitz.

react-smooth-scrollbar's Issues

this.scrollbar.setOptions is not a function

When props change, scrollbar crash in componentWillReceiveProps method.

componentWillReceiveProps(nextProps) { this.scrollbar.setOptions(nextProps); }

Also I can't find setOptions function in smooth-scrollbar package.

How to detect if scrollbar has scroller on load

I want to check if my scrollbar has scrollBar on page load. Please help

Disable overscroll plugin

HI, I don't know if its bug of OverscrollPlugin, smooth-scrollbar or react-smooth-scrollbar, but when I try disable OverscrollPlugin by

plugins: { overscroll: false },

scrollbar events/plugins stop working, but there isn't error in console.

I have workaround,

plugins={{ overscroll: { effect: 'glow', glowColor: 'transparent' } }}

but I don't like it :)

how to scroll div to scroll Top 0?

i want to scroll div to top of page how can i do this ? Please help

TIA

accessibilitf: supporting customizing tabindex

It would be great to provide an extra tabindex field! Thanks

Connected to idiotWu/smooth-scrollbar#152

typescript .dts file problem

in [at-loader] ./ClientApp/components/NavMenu.tsx:3:23 TS7016: Could not find a declaration file for module 'react-smooth-scrollbar'. 'C:/Projects/GameScrubs/GameScrubs.Web/node_modules/react-smooth-scrollbar/dist/react-smooth-scrollbar.js' implicitly has an 'any' type. Try npm install @types/react-smooth-scrollbarif it exists or add a new declaration (.d.ts) file containingdeclare module 'react-smooth-scrollbar';``

if I run npm install @types/react-smooth-scrollbar or add it to packages.config I get

ERROR in [at-loader] ./ClientApp/components/NavMenu.tsx:3:8 TS1192: Module '"C:/Projects/GameScrubs/GameScrubs.Web/node_modules/@types/react-smooth-scrollbar/index"' has no default export.

Any ideas on how to fix this?

onUpdate problem

i write a plugin . when i try to scroll with moving tracks (not roll the mouse ) , onUpdate methods dosent call for me.
but onScroll in the my component is works fine.

[solved]

[solved]

Support current react version (15.0)

How to add horizontal scroll in div

I want to add horizontal scroll bar in my container how can i use react-smooth-scrollbar Please help

Unknown prop

vendor.bundle.js:9431 Warning: Unknown prop `fricton` on <section> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in section (created by r)
    in r (created by Scrollarea)
    in Scrollarea (created by Collector)
    in div (created by Collector)
    in div (created by Collector)

Can't resolve 'smooth-scrollbar'

Environment

• "react-smooth-scrollbar": "8.0.6"
• "react": "16.2.0

Issue Summary

Got the error

Failed to compile.
./node_modules/react-smooth-scrollbar/dist/react-smooth-scrollbar.js
Module not found: Can't resolve 'smooth-scrollbar' in '/my-project/node_modules/react-smooth-scrollbar/dist'

after adding only this line in my app (the app was created by create-react-app)

import Scrollbar from 'react-smooth-scrollbar';

Window undefined in a SSR environment

Is there any good way to initialise react-smooth-scrollbar when window is defined (SSR)? Using the useEffect hook looks promising, but the error is produced even when trying to conditionally render Scrollbar, any ideas?

The error produced is the following:

ReferenceError: window is not defined
at Object. (/Users/emilolsson/projects/AutoMat-SSR/react-ssr-setup/node_modules/smooth-scrollbar/dist/smooth-scrollbar.js:1:138)
at Module._compile (internal/modules/cjs/loader.js:774:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
at Module.load (internal/modules/cjs/loader.js:641:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:681:19)
at require (internal/modules/cjs/helpers.js:16:16)
at /Users/emilolsson/projects/AutoMat-SSR/react-ssr-setup/node_modules/react-smooth-scrollbar/dist/react-smooth-scrollbar.js:1:60
at Object. (/Users/emilolsson/projects/AutoMat-SSR/react-ssr-setup/node_modules/react-smooth-scrollbar/dist/react-smooth-scrollbar.js:1:339)
at Module._compile (internal/modules/cjs/loader.js:774:30)

Thank you!

Support for Universal React Server Rendering

how to add overscroll effect on react

how to change react-smooth-scrollbar programmatically the scroll position?

i want to scroll div to top of page how can i do this ? Please help

TIA

Strict Mode compatibility: removing `componentWillReceiveProps`

In order to fully support React Strict mode componentWillReceiveProps should be renamed or, better, replaced at all. Putting all its logic into componentDidUpdate (before the this.scrollbar.update() code) is trivial (and I'd more than happy doing to do that) but I'd like to know if there are some reasons that must be considered before doing that.

This would solve the following warning

Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Thanks
Stefano

Uncaught DOMException: Failed to execute 'removeChild'

I think, that problem is in render method:

{children.length > 1 ? <div>{children}</div> : children}

Everything is correct, when <div /> or other HTML element ( or elements) is (are) used like content. But when other React component is used error from title is thrown. Even if component has one root <div /> element.

How to get if scrollbar reach to bottom of Div

react-smooth-scrollbars scrollTop always returns 0

How to add scroll shadow correctly?

The first demo is based on Roman Komarov's blog.
Online demo

However, when I try to use it with smooth-scrollbar, it does not work well. Any suggestion will be helpful. Thanks
Online demo

What is this.$container in docs?

I am using this library for the first time, I don't get what it is. I know it is a react thing, but could someone please help me out. Thanks in Advance!

Prop to Scroll To Specific location

Is there any way there is a way, I can scroll to a particular spot, or relative to the last item, on page load in react???

How to change scrollbar-track width and color of track

Scroll to last inserted Chat problem

Hi Dolphin Wood,
I am developing chat system and once I send any message to user how to update state of scrollbar to last chat.
any help will be more helpful for me to resolve this issue
Thanks in Advance

Get Scrollbar Instance

any way to get scrollbar instance other than wrapping with another component? Im trying to get it to scroll to bottom on update.

Missing CSS?

Hi there,

I got this module working it scrolls and what not but I you can't see the scrollbar. It says on the doc to add the styles. I checked the files and I don't see any styles in there. Where can I get the style? do I have to install the smooth-scrollbar along side this module?

how to use in ssr?

window is not defined

every thing have transform: translate3d not Worrking when add Smooth Scrollbar

When I add

<Scrollbar
        damping={0.03}
        thumbMinSize={50}
        renderByPixels={true}
        alwaysShowTracks={false}
      >
 <div style={{ height: "2.5px" }}>

 Every thing here have transform: translate3d It does not work properly

<div>
</Scrollbar>

How to get Scrollbar Instance by using Context in child component

I´m trying to get an Instance of the Scrollbar by using Context in a child component.
Stripped down everything so my Code is looking like the 2nd method listed ("2. Use Context in child component"), yet all I get is an error:
"TypeError: Cannot read property 'func' of undefined" for the code line: "getScrollbar: React.PropTypes.func"

The first method (using ref in the parent component) is working as it should!
Am I missing something here? Isn´t the example complete and I need to create the Context first, before using it in the child component? I´m pretty new to react and would love to get some help with this. Thank you guys!

Jsx?

Just wondering does that make sense to pull in all the JSX tools just to make 3 lines in it :)

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

We're using React-smooth-scrollbar in an auto-complete dropdown, and as such, the content of the dropdown changes as the user types.

The suggestions are grouped together as a list of panels (which itself isn't important), and is rendered as follows:

<Scrollbar> {panels} </Scrollbar>

The issue arise when we remove a panel from the list, and React throws the following exception:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (webpack:///./~/react-dom/lib/DOMChildrenOperations.js?:65:14)
    at Object.processUpdates (webpack:///./~/react-dom/lib/DOMChildrenOperations.js?:209:11)
    at Object.dangerouslyProcessChildrenUpdates [as processChildrenUpdates] (webpack:///./~/react-dom/lib/ReactDOMIDOperations.js?:29:27)
    at processQueue (webpack:///./~/react-dom/lib/ReactMultiChild.js?:137:29)
    at ReactDOMComponent._updateChildren (webpack:///./~/react-dom/lib/ReactMultiChild.js?:355:9)
    at ReactDOMComponent.updateChildren (webpack:///./~/react-dom/lib/ReactMultiChild.js?:299:12)
    at ReactDOMComponent._updateDOMChildren (webpack:///./~/react-dom/lib/ReactDOMComponent.js?:930:12)
    at ReactDOMComponent.updateComponent (webpack:///./~/react-dom/lib/ReactDOMComponent.js?:748:10)
    at ReactDOMComponent.receiveComponent (webpack:///./~/react-dom/lib/ReactDOMComponent.js?:710:10)
    at Object.receiveComponent (webpack:///./~/react-dom/lib/ReactReconciler.js?:125:22)

The cause of this appears to be DOM manipulation by the smooth-scrollbar package: https://github.com/idiotWu/smooth-scrollbar/blob/develop/src/index.js#L91

By changing the innerHTML, it causes a mismatch between reacts virtual DOM and the actual DOM, causing React to throw the above exception.

More specifically, when we remove a panel from the list, React calculates the changes using the virtual DOM and attempts to remove the child node. However, because the smooth-scrollbar library wraps the scrollable content in <article class="scroll-content"></article>, the virtual DOM and actual DOM differ.

React calculated the changes to the DOM believing it to be:

<section data-scrollbar ref="container">
    <child elements>
</section>

However due to manipulation by smooth-scroll bar, the actual DOM is:

<section data-scrollbar ref="container">
    <article class="scroll-content">
        <child elements>
    </article> 
</section>

The best fix for this might be preventing the DOM manipulation by the smooth-scroll library and instead modify the DOM through react-smooth-scroll? I'm not sure if there's a easier fix that leaves react-smooth-scrollbar as a wrapper but I'd be delighted to be proven wrong.

When component is rendered or updated dosn't set the limits (x and y) properly

Hey @idiotWu ,

I have been trying the React component and I've found the component it dosn't set the limits properly. When I try to get them I get {x:0, y:0}, it seems that the component is not triggering when the content is rendered.

Because of that I can't set the position of the scrollbar to the bottom when the component is rendered.

OverscrollPlugin error

I am getting this error when using the overflow plugin
_reactSmoothScrollbar.default.use is not a function

Any way to fix this?

I am using it the way shown in the repo

Thanks!

Scrollbar.setPosition() doesn't work on componentDidMount?

Hi. Could someone please help me with issue of setting initial position when component mounts? for some reason it works only when I add this method in click event http://prntscr.com/hh6e71

Also I've noticed that when component mounts, limit is 0 on both axis and it receives value only when I scroll, for example, so that's I guess the reason for setPosition not working, even with hardcoded data, like (100, 100).