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

LibWeb: IntersectionObserver does not work inside boxes with scrollable overflow #23631

Closed
kalenikaliaksandr opened this issue Mar 18, 2024 · 0 comments · Fixed by #23666
Closed

LibWeb: IntersectionObserver does not work inside boxes with scrollable overflow #23631

kalenikaliaksandr opened this issue Mar 18, 2024 · 0 comments · Fixed by #23666
Labels
bug Something isn't working

Comments

@kalenikaliaksandr
Copy link
Contributor

run_the_update_intersection_observations_steps is not invoked when scroll offset inside box with scrollable overflow changes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .scroll-box {
        width: 300px;
        height: 300px;
        overflow: scroll;
        border: 2px solid black;
      }

      .content-box {
        width: 100%;
        height: 600px;
        position: relative;
      }

      .target-box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 500px;
      }
    </style>
  </head>
  <body>
    <div class="scroll-box">
      <div class="content-box">
        <div class="target-box"></div>
      </div>
    </div>

    <script>
      function onIntersection(entries) {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            console.log("The box is now visible.");
          } else {
            console.log("The box is not visible.");
          }
        });
      }

      let observer = new IntersectionObserver(onIntersection, {
        root: document.querySelector(".scroll-box"),
        threshold: 1.0,
      });

      observer.observe(document.querySelector(".target-box"));
    </script>
  </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

LibWeb: Do not include box's own scroll offset in get_client_rects() kalenikaliaksandr/serenity
1 participant
@kalenikaliaksandr