CODEWITHSUNDEEP
reactjsframer-motion
David
David

Reputation: 403

How to add scroll in the framer-motion expandable card example?

  1. click one of the card
  2. the card expands and pops up
  3. tried to scroll but only scrolling the background page while I wanted to scroll down to view more text

I already tried overflow:hidden which doesn't scroll ( and the scroll bar is ugly)

How can I solve this ? thank you very much !

https://codesandbox.io/s/framer-motion-animatesharedlayout-app-store-demo-i1kct?from-embed

Upvotes: 0

Views: 1066

Answers (1)

Cadin
Cadin

Reputation: 4649

It looks like a few things are preventing the scroll:

  1. height: auto sizes the container to fit the content.
  2. overflow: hidden instead of scroll.
  3. pointer-events: none prevents the element from getting the scroll events.

Changing this block in styles.css:

.open .card-content {
  height: auto;
  max-width: 700px;
  overflow: hidden;
  pointer-events: none;
}

to this:

.open .card-content {
  max-width: 700px;
  overflow-y: scroll;
}

seems to work.

Upvotes: 2

Related Questions