How to scroll inside a fixed element? React / Tailwind
Hello kind people, I have been stuck on this issue for 2 days and I would like some help.
https://ylli-vert.vercel.app/showroom
This is a simple shopify cart I have created which adds and removes items.
My issue here is that when you add more than lets say 5 times (the entire cart starts overflowing) I cannot scroll inside to view the items and I lose sight of the button.
Now I can fix the button showing by separating all of them in 3 separate divs with a flex flex-col h-full but I still cannot get the cart items to be scrollable even if I just enable overflow-y-scroll h-full.
Either way main issue is at "how to get the items inside the cart when they are more than 5 to scroll inside of just hide/push towards the bottom".
Thank you in advance.
Shopify store app
Generated by somebody
4 Replies
Try placing the cart items into their own container and give that an overflow-y: scroll;
You will probably need to define a height or max height to actually stop it growing
Hey Chris thanks for the suggestion. When I do that my items just shrink down but I'm still not able to scroll inside of it.
<div className="overflow-y-scroll h-52">
{cartLines.map(({ node }) => {
const product = node?.merchandise?.product;
const imageUrl =
product?.featuredImage?.transformedSrc '/file.svg';
const title = product?.title 'Product Title';
const quantity = node?.quantity 1;
const price = node?.merchandise?.price?.amount '0.00';
return (
<div
key={node.id}
className="font-light grid grid-cols-4 gap-4"
>
<p>{title}</p>
<CartItemsQuantity quantity={quantity} itemId={node.id} />
<p>{formatCurrency(price)}</p>
<div>
<Image
src={imageUrl}
alt={title}
width={150}
height={150}
loading="lazy"
decoding="async"
/>
<RemoveCartItem itemId={node.id} />
</div>
</div>
);
})}
</div>
There certainly is something strange going on with the scrolling on your site,
It looks like you have something called "lenis" taking over the scrolling, maybe that is messing with it 🤔
Yes you are correct. Once I disabled Lenis the scroll started working.
Thank you Chris!
Now as to why was lenis causing this issue, that I don't know. AFAIK lenis is not scroll hacking but I guess it adds some overflow around the body/html. That might be the culprit. Either way, thank you!