search

Stanko / react-animate-height

Lightweight React component for animating height using CSS transitions. Slide up/down the element, and animate it to any specific height.
https://muffinman.io/react-animate-height
MIT License
756 stars 53 forks source link

Allow scroll if the height is less than the maximum height #103

Closed tqdo closed 3 years ago

tqdo commented 3 years ago

This package is awesome. I am playing around with the demos here: https://muffinman.io/react-animate-height/ and wonder whether there is any way to scroll to see the full content if the chosen height is less than the actual height (when we set height to 'auto'). Thanks

Stanko commented 3 years ago

Hey, thank you!

You can do something like this:

<AnimateHeight height={isOpen ? "auto" : 0}>
  <div
    style={{
      width: 300,
      overflow: "auto",
    }}
  >
    Content goes here...
  </div>
</AnimateHeight>

Add a scrolling div inside AnimateHeight and then limit it's height.

Check demo here: https://codesandbox.io/s/quirky-turing-hn2vx?file=/src/App.js

Cheers!