React-window: Add option to FixedSizeList for hiding scrollbar

Created on 11 Nov 2019  路  6Comments  路  Source: bvaughn/react-window

Sometimes we don't want the scrollbar to appear.
I think it's good to add this as an option.
What do you think ?
If it's a valid issue i can help to contribute on this

Most helpful comment

In case it helps anyone, in my case I have something like:

.no-scrollbars{
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;

    &::-webkit-scrollbar {
      width: 1px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
    }
  }

  .no-scrollbars::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

And then add that class to:
<DynamicSizeList className="no-scrollbars">

It works for me for Android and iOS webviews. I'm assuming FixedSizeList would be the same?

All 6 comments

I don't understand why you would want an un-scrollable windowing component, but the only ways to disable the browser's scrolling behaviors would be to set a smaller height style or an overflow: hidden style. Both of these can already be done via the style prop so you should be unblocked here. :)

sorry but i think you misunderstand it.
I mean hide the scrollbar visually while still make it scrollable, not hide it completely.

Any way of hiding the scrollbar would be CSS-driven, and there's already className and style props.

Trying via CSS or JSS and have no luck hiding the scroll. there is already an overflow: auto; set on the component that cannot be overwritten

In case it helps anyone, in my case I have something like:

.no-scrollbars{
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;

    &::-webkit-scrollbar {
      width: 1px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
    }
  }

  .no-scrollbars::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

And then add that class to:
<DynamicSizeList className="no-scrollbars">

It works for me for Android and iOS webviews. I'm assuming FixedSizeList would be the same?

Use-case: I needed to use @squalx's css to hide the native scrollbar when using react-window in combination with simplebar

Was this page helpful?
0 / 5 - 0 ratings