WebView Compose scroll example

MainActivity.kt

package dev.sebastiano.webviewcompose

import android.annotation.SuppressLint
import android.content.Context
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import dev.sebastiano.webviewcompose.ui.theme.WebviewComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WebviewComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Column(Modifier.fillMaxSize()) {
                        var scrollY by remember { mutableStateOf(0) }
                        PageBodyWithWebView(
                            pageUrl = "https://www.google.it",
                            onWebpageScroll = { _, y -> scrollY = y },
                            modifier = Modifier
                                .fillMaxWidth()
                                .weight(1f)
                        )

                        Text(
                            text = "Y: $scrollY",
                            style = MaterialTheme.typography.subtitle1,
                            modifier = Modifier
                                .background(Color.Red)
                                .fillMaxWidth()
                                .padding(16.dp)
                        )
                    }
                }
            }
        }
    }
}

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun PageBodyWithWebView(
    pageUrl: String,
    onWebpageScroll: (x: Int, y: Int) -> Unit,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    AndroidView(
        modifier = modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        factory = {
            MyWebView(context).apply {
                settings.javaScriptEnabled = true
                webViewClient = WebViewClient()
                onScrollListener = onWebpageScroll
                loadUrl(pageUrl)
            }
        })
}

class MyWebView(context: Context) : WebView(context) {
    var onScrollListener: ((x: Int, y: Int) -> Unit)? = null

    override fun onScrollChanged(l: Int, t: Int, oldl: Int, oldt: Int) {
        super.onScrollChanged(l, t, oldl, oldt)
        onScrollListener?.invoke(l, t)
    }
}

How to have scroll for webview both horizontal and vertical if parent container is a scaffold.

@vickycj the parent container is irrelevant in this case. You get both the x and y scroll values with this gist, and you then need to use them according to your use case.

@rock3r In a ModalBottomSheet none of the scroll events seem to fire at all inside the WebView.