When using `compose web` with `skiko canvas`, the ...

# compose-web

[Gerardo Rodriguez]

When using compose web with skiko canvas, the LazyColumn seems to not behave as expected with mouse wheel.

I try to scroll down with the mouse wheel but is not working. Do I need to do something else? Is this issue already identified? Thanks!

[agrosner]

Seems like an unimplemented feature. I had hacked it by introducing an event handler to forward scroll events to the container but it’s needed everywhere

[agrosner]

LaunchedEffect(Unit) {
        scrollListener.consumeAsFlow()
            .collect {
                scrollState.scrollBy(it.toFloat())
            }
    }

val scrollListener = Channel<Double>()

In main js kt :

window.addEventListener("wheel", { event ->
        if (event is WheelEvent) {
            event.stopPropagation()
            GlobalScope.launch {
                scrollListener.trySend(event.deltaY)
            }
        }
    })

[agrosner]

This only works for one at a time and not invididual compose views

[Gerardo Rodriguez]

Thanks! I’ll try it 😄

[burnoo]

I’ve found the following workaround:

val scope = rememberCoroutineScope()
val listState = rememberLazyListState()
// ...
LazyColumn(
    state = listState,
    modifier = Modifier.onPointerEvent(PointerEventType.Scroll) {
        scope.launch {
            listState.scrollBy((it.nativeEvent as SkikoPointerEvent).deltaY.toFloat())
        }
    },
    userScrollEnabled = false,
    content = content,
)

Working demo: https://burnoo.github.io/DemoListApp/

Doesn’t work with touch screens though, couldn’t find workaround for that.