geist-ui icon indicating copy to clipboard operation
geist-ui copied to clipboard

[Feature] Virtual scrollbar component

Open unix opened this issue 4 years ago • 0 comments

Feature request 🚀

  • [x] I will create Pull Request
  • [ ] It's just a suggestion

Expected

  • Perfect compatibility
  • Display the scrolling status of the website
  • Easy to set color and size, or more advanced features: shadow, transparency, gradual, etc.
  • Used internal elements to ensure that they do not float to the page top.

Refs

Examples

() => {
  const ref = useRef(null)
  return (
    <div ref={ref}>
      <Scrollbar containerRef={ref}  />
      <other-elements />
    </div>
  )
}

Programme (Optional)

The virtual scrollbar needs to automatically recognize the height of the parent element and the content height, and calculate the correct scroll distance, scrollbar length, scrollbar position, etc.

Secondly, the virtual scrollbar component should be able to set the container manually, and the component will automatically perform calculations based on the contents of the container.

Performance Goals

  • Smooth swiping on mobile devices
  • Even within the Context, the number of re-renderings should be kept as low as possible

unix avatar Jun 27 '21 18:06 unix