sakhnyuk / rc-scrollbars Goto Github PK
View Code? Open in Web Editor NEWReact scrollbars component
Home Page: https://rc-scrollbars.vercel.app/
License: MIT License
React scrollbars component
Home Page: https://rc-scrollbars.vercel.app/
License: MIT License
rc-scrollbars is awesome, if it can support ESM will be better! :)
Hi everyone! When I'm using RC Scrollbars I can't use a Popover component inside of it. For some reason, it simply won't work.
https://codesandbox.io/s/chakra-scrollbars-5t49x?file=/src/index.tsx
Related to chakra-ui#4709
Hi. Currently, if we enable autoHide mode, we get scrollbars to show when a user starts scrolling. I don't think that's the best UX for desktop browsers. Is there any change to support hover mode? When a user hovers the scrollable element, scrollbars should show up.
Hello, is this possible to fix? You can recreate this issue if you go to the demo page and just zoom out, the default browser scrollbar will appear.
Thanks for restoring the project!
Is there a way to add our own customer event handlers for certain components? For instance, I am trying to add a onMouseDown
event handler for thumbVertical
. I have tried adding the onMouseDown
JSX attribute to renderThumbVertical
, but it seems like my custom event handler is being overridden by Scrollbars.prototype.handleVerticalThumbMouseDown
. Removing this event listener using the Chrome DevTools allows my custom event handler to be called.
I am currently working around this by using the onPointerDown
JSX attribute instead, but this is more of a hack and not a solution.
Is there a built-in way to override this behavior, and if not, are there plans to add such a capability in the future? Thanks.
This seems like a good place to start when tackling the former PR's
See: malte-wessel/react-custom-scrollbars#88
I assume the new project doesn't have RTL support. I'll test this out when I get time, unless someone beats me to it.
Scrollbars not appearing/disappearing when internal elements height changes.
Bug is reproducible on Chrome, Edge, Opera, but works as intended on Firefox.
Repro project: https://codesandbox.io/s/react-hooks-usestate-forked-utzu8n?file=/src/index.js
Hello, is there a legitimate way to render content from the bottom?
We used this renderView:
const renderView = props => {
const style = {
...props.style,
display: 'flex',
flexDirection: 'column-reverse'
}
return <div {...props} style={style} />
}
But somehow it stopped working properly and if we use it, the scrollbar starts at the top and doesn't want to go down (only up).
What we want to achieve is similar to what you can see in chats - scroll starting at the bottom and going up.
Here is the example with renderVIew I mentioned: https://codesandbox.io/s/confident-fermi-n3q9q?file=/src/SpringScrollbarsExample.js
I am using this in my app and it is creating a horizontal scrollbar due to some slight overflow that I do not want. I found this issue with code sample in the repo this is based off of here: malte-wessel/react-custom-scrollbars#213
But I tried the code:
renderTrackHorizontal={(props) => (
<div
{...props}
style={{ display: 'none' }}
className={'track-horizontal'}
/>
)}
But that did not appear to do anything.
Thank you for taking over the project 👏
I tried to move my project to rc-scrollbars
, but it seems I cannot set className
to <Scrollbars />
, would it be possible to add it?
Considering trying this out for our app, but there's an example I kind of feel is missing. All the current examples seem to all specify both width
and height
in pixels.
Would this component work without one of them, and the other just being like 100%
or just behave like a block filling the horizontal space by default?
Basically we have some wide tables on our website, and I don't want to limit their vertical height, and the width should just be as much as is available in its container. 🤔
Hi. Thanks for restoring the project!
Can you rename Props
interface to something like ScrollbarProps
and export it so we can extend it from the outside?
I'm struggling here to figure out the correct types for the style object that gets passed to renderThumbVertical
.
This is my current code:
...
type ThumbVerticalBaseStyles = {
backgroundColor: string;
borderRadius: string;
cursor: string;
display: string;
height: string;
position: string;
};
const thumbVertical = ({
style = {} as ThumbVerticalBaseStyles,
...props
}) => {
const finalStyle = {
...style,
visibility: 'hidden'
};
return <div style={finalStyle} {...props} />;
};
return (
<div className={'table-container wide'}>
<header>
<h3>{customers.length} Customers</h3>
</header>
<Scrollbars
autoHeight
autoHeightMin={0}
autoHeightMax={'calc(100vh - 40px)'}
renderThumbVertical={thumbVertical}
...
Now on that line return <div style={finalStyle} {...props} />;
,
I am getting the following error: TS2322: Type '{ visibility: string; backgroundColor: string; borderRadius: string; cursor: string; display: string; height: string; position: string; }' is not assignable to type 'Properties<string | number, string & {}>'. Types of property 'position' are incompatible. Type 'string' is not assignable to type 'Position | undefined'. index.d.ts(1850, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'
Hi, I used this react component a few days ago, It's very efficient!
But, today I find a compatibility problem. It does't work when Google Chrome is set to not show the scroll bar by default.
The cause of the problem is the getScrollbarWidth.ts
file. You will get number 0 by function getScrollbarWidth
when Google Chrome is set to not show the scroll bar by default. Because the value of div.offsetWidth
equal to the value of div.clientWidth
.
Hi
in RTL page vertical scroll bar appear in left side of elements and its visible when use rc-scrollbars in version 1.0.0 the main div have scrollBar class name and with this class , I fix this issue in my project but in version 1.0.3 scrollBar class removed and all scroll bar visible again
I'll try to maintain a list of PR's that have been addressed. This will be a mega thread if spammed, so please look for the issue that will be opened on the matter.
Hi! First of all, thanks for the fork and revival.
My scrollable list component renders a div
that I would like to replace with Scrollbars
. It works fine out of the box, but it doesn't seem that Scrollbars
supports an id
prop, which I am currently passing to the div
in order to lazy-load images using the intersection observer API.
Would it be possible to support an id
prop?
I tried using autoHeightMax="100%"
, but it was not working.
Wheeling on scrollbars won't scroll the view. It will be better if this feature is available. Thanks a lot.
Hello, I want to use library, but after installing I faced with
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'C:\Projects\node_modules\rc-scrollbars\lib\Scrollbars'
React: 16.13.1
How can I fix it?
I'm not exactly what that thing is called, but the actual thing that moves up and down on the scrollbar. It is very hard to see on my dark background. I'm wondering if there is a way to add a custom style to it so I could change the color on it a bit.
I've disabled the native scrollbars with css on the whole page:
::-webkit-scrollbar {
display: none;
width: 0; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
::-moz-scrollbar {
display: none;
}
::-o-scrollbar {
display: none;
}
But then the scrollbars from the library also disappears. Is it by design to also hide the custom ones when add the css above?
My point was to use custom scrollbars while disabling the native one...
I read previous discussion about the same error #15
Provided fix (#17) works fine for Chrome (Win10), but does not for Firefox (dev edition 117.0b9 (64-bit) + Win10)
Example: https://2n8jhh.csb.app/
(source https://codesandbox.io/s/rc-scrollbars-test-forked-2n8jhh)
The problem is with function getPxRatio() src/utils/getScrollbarWidth.ts
In FF window.screen.availWidth === document.documentElement.clientWidth
for all zoom levels when page body doesn't have vertical scrollbar. Function always returns 1 and that does not trigger the scrollbarWidth updating.
window.screen.availWidth !== document.documentElement.clientWidth
when page has vertical scrollbar. In this case scrollbarWidth is updating correctly.
When im using element.scrollIntoView(true)
foundItem.scrollIntoView({
block: "center" // or 'start'
behavior: "smooth"
});
scroll working is not correnctly
reproduce link
https://codesandbox.io/s/react-fiddle-forked-bvesc?file=/src/App.js
first thanks for the excellent work, supporting this library.
I am trying to use this library with NextJs.
I am using the "universal" property, as recommended in the documentation, but even so I always get the following error:
ReferenceError: window is not defined
The error indicates the following files:
rc-scrollbars\lib\utils\getScrollbarWidth.js:8:15)
rc-scrollbars\lib\utils\index.js:11:27)
I also tried to copy the example from the documentation, but I was also unsuccessful.
Am I doing something wrong?
i am using NjextJs in 9.5.4 version
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.