Scroll not working when scrollTo has immediate: true... #443
Description
Issue
Page not scrolling to top on load/refresh when immediate: true is specified in scrollTo.
Steps to reproduce
- Scroll to the end of the page
- Reload page
Output
Page remain at the end (does not scroll to the top)
Expectation
The page to have been scrolled to the top with no animations
Disclaimer: I might be misunderstanding the docs, usage of immediate
Findings
- The
onCompletedoes trigger whenimmediate: trueis defined - After reload the scroll seems to be paused and only if you scroll, the page does scroll to the top (*).
- Scroll (animate) to the top does work when
immediate: trueis not specified orimmediate: false - I tried different without
force, without stoppinglenisbut the output was the same
(*) If you scroll after reload the page does jumps to the top and scrolls normally
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lenis issue #443</title>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/lenis.css"
/>
</head>
<style>
body,
h1,
h2 {
margin: 0;
}
body {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.box {
background-color: #1b458f;
box-sizing: border-box;
height: 100vh;
padding: 2rem;
}
.box:nth-child(1) {
background-color: #c4122e;
}
</style>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
<script>
const lenis = new Lenis({
autoRaf: true,
});
lenis.scrollTo(0, {
immediate: true,
onComplete: () => {
console.log("Enable scroll.");
},
});
</script>
</body>
</html>