mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 03:27:44 +00:00
LibWeb: Use offset of nearest scrollable ancestor for positioned boxes
Because positioned descendants are painted out-of-order we need to separately apply offset of nearest scrollable box for them. Fixes https://github.com/SerenityOS/serenity/issues/20554
This commit is contained in:
parent
2952f01e84
commit
6b79508c08
5 changed files with 167 additions and 0 deletions
|
@ -0,0 +1,71 @@
|
|||
<html>
|
||||
<link rel="match" href="reference/positioned-elements-in-scroll-container-ref.html" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
article {
|
||||
overflow-x: scroll;
|
||||
overflow-y: scroll;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid black;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 2rem;
|
||||
height: 30rem;
|
||||
background-color: #bbb;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<article id="scrollcontainer">
|
||||
<h1>Fly away to victory!</h1>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
|
||||
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
|
||||
<div class="card">A card!</div>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
|
||||
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
||||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
|
||||
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
<script>
|
||||
const scrollContainer = document.getElementById("scrollcontainer");
|
||||
scrollContainer.scrollTop = 100;
|
||||
</script>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue