Trying to set `overscroll-behavior` on my `body` ...

# kobweb

[jeff]

Trying to set overscroll-behavior on my body

Trying this:

ctx.stylesheet.registerStyleBase("body") {
    Modifier.attrsModifier { attr("overscroll-behavior", "none") }
      .height(100.vh)
      .width(100.vw)
  }

Gives this:

IllegalStateException: ComponentStyle declarations cannot contain Modifiers that specify attributes. Please move Modifiers associated with attributes to the ComponentStyle's extraModifiers parameter.

But switching to this:

ctx.stylesheet.registerStyleBase(
    "body",
    extraModifiers = Modifier.attrsModifier { attr("overscroll-behavior", "none") },
  ) {
    Modifier.height(100.vh).width(100.vw)
  }

isn't applying overscroll-behavior to body. Any ideas?

[David Herman]

You know what? It's quite possible that feature never worked for stylesheet styles; I need to look into it. I'm swamped preparing for a Droidcon talk in a week from now, but I will take a look at this top priority after that.

What I would recommend in your case is moving this logic into your @App method, something like:

val RootStyle = ComponentStyle(extraModifiers = ...) {
   ...
}

@App
@Composable
fun AppEntry(content: ...) {
  SilkApp {
    Surface(RootStyle.toModifier()) {
      content()
    }
  }
}

[David Herman]

Update: I'm super tired.

[David Herman]

overscroll-behavior is a CSS style, not an HTML attribute

[David Herman]

You want this:

ctx.stylesheet.registerStyleBase("body") {
    Modifier.styleModifier { property("overscroll-behavior", "none") }
      .height(100.vh)
      .width(100.vw)
  }

[jeff]

ahhhhh d’oh

[jeff]

Thank you!

[jeff]

Hope your talk goes well!