Scrolling Issue: Unable to Reach Footer When Hovering Over Scheduler Element #149
Description
There is a scrolling problem on the Epsilla website related to the scheduler element.
Current Behavior:
1. If I don't stop scrolling from up while hovering over the scheduler element, I can scroll down. But if I stop scrolling on the scheduler element, I can't scroll down, I have to come outside from scheduler element to scroll down and reach footer.
<div id="root">
<div class="w-full h-full flex flex-col") - When hovering over the scheduler element (https://epsilla-ai.larksuite.com/scheduler/4aca8159d1224454), users cannot scroll down to reach the footer.
- Scrolling is only possible when the cursor is not over the scheduler element ( <div class="w-full h-full flex flex-col")
Expected Behavior:
Users should be able to scroll down to the footer regardless of cursor position on the page.
Steps to Reproduce:
- Visit https://epsilla.com/
- Locate the scheduler element on the page
- Hover the cursor over the scheduler
- Attempt to scroll down to the footer
Disclaimer: I'm new to web development :)
The issue appears to be related to the following HTML structure:
Inspect https://epsilla.com/ to see it :)
<body class="ud__lang-en">
<div id="root">
<div class="w-full h-full flex flex-col">
<header class="d-sm-none flex-center shrink-0 select-none">
<!-- Header content -->
</header>
<div class="main-container flex-1">
<div class="w-full h-full flex-center">
<div class="_10d0a8z0" data-layout="laptop">
<aside class="_10d0a8z1">
<!-- Sidebar content -->
</aside>
<main class="_10d0a8z2">
<div class="_2y1slq0 ud__modal__content ud-typography-body-0 u131m2y1 u34kn u11cvrxx uzhf14q u11gww4r ukj31lv u1hchl60 u1royi5k u1qfhq4j uj2bo7u u1tdvglg u1bbjp94 u1elgmow u11ffjux u16gdikw uvhckaz uke3gve uoddzzi umt1vhq u5k1dk9 u1h2w2e3">
<!-- This div likely contains the scheduler -->
<div class="ud__modal__header">
<!-- Modal header content -->
</div>
<div class="ud__modal__body ud__scrollArea ud__scrollArea-hide-bar ud__scrollArea-y">
<div class="ciy8wp0">
<!-- This is probably the scheduler component -->
<div class="ciy8wp1">
<!-- Date picker and time slot selection -->
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
</div>
</div>
<!-- Other body content -->
</body>