Skip to content

Commit

Permalink
Remove explicit smooth scroll behavior from routing logic
Browse files Browse the repository at this point in the history
This was potentially overriding a site's setting. Instead, we should
encourage users adding code like:

```
registerStyleBase("html") {
   Modifier.scrollBehavior(ScrollBehavior.Smooth)
}
```

in their own code instead, and leave the behavior up to per side.
  • Loading branch information
bitspittle committed Sep 18, 2024
1 parent f4718c9 commit 88fd6d5
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -446,23 +446,20 @@ class Router {
// Even if the URL hasn't changed, still scroll to the target element if you can. Sometimes a user might
// scroll the page and then re-enter the same URL to go back.
if (url.contains('#')) {
fun Element.scrollIntoViewSmoothly() {
scrollIntoView(js("{behavior: \"smooth\"}"))
}

fun scrollElementIntoView() = document.getElementById(url.substringAfter('#'))?.scrollIntoView()
if (onNewPage) {
// We need to give the page a chance to render first, or else the element with the ID might not
// exist yet.
MutationObserver { mutations, observer ->
mutations.forEach { mutation ->
if (mutation.type == "childList") {
document.getElementById(url.substringAfter('#'))?.scrollIntoViewSmoothly()
scrollElementIntoView()
observer.disconnect()
}
}
}.observe(document.body!!, MutationObserverInit(childList = true, subtree = true))
} else {
document.getElementById(url.substringAfter('#'))?.scrollIntoViewSmoothly()
scrollElementIntoView()
}
}
}
Expand Down
6 changes: 6 additions & 0 deletions playground/site/src/jsMain/kotlin/playground/MyApp.kt
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ fun updateTheme(ctx: InitSilkContext) = ctx.config.apply {

@InitSilk
fun registerGlobalStyles(ctx: InitSilkContext) = ctx.stylesheet.apply {
registerStyle("html") {
cssRule(CSSMediaQuery.MediaFeature("prefers-reduced-motion", StylePropertyValue("no-preference"))) {
Modifier.scrollBehavior(ScrollBehavior.Smooth)
}
}

registerStyleBase("body") {
Modifier
.fontFamily(
Expand Down

0 comments on commit 88fd6d5

Please sign in to comment.