Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Scrolling Issue: Unable to Reach Footer When Hovering Over Scheduler Element #149

Open
negativenagesh opened this issue Sep 21, 2024 · 0 comments
Open

Scrolling Issue: Unable to Reach Footer When Hovering Over Scheduler Element #149

negativenagesh opened this issue Sep 21, 2024 · 0 comments
Labels
feature

Comments

@negativenagesh
Copy link

https://epsilla.com/

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")
  1. When hovering over the scheduler element (https://epsilla-ai.larksuite.com/scheduler/4aca8159d1224454), users cannot scroll down to reach the footer.
  2. 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:

  1. Visit https://epsilla.com/
  2. Locate the scheduler element on the page
  3. Hover the cursor over the scheduler
  4. 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@negativenagesh