在對照著看翻譯結果和原文時，需要不斷捲動畫面。如果兩邊畫面可以同步捲動的話，就能省下手指在兩個 WebView 中來回操作的重覆行為。要達到同步捲動的功能，必須要將其中一個 WebView 的捲動狀態也反應到另一個 WebView 才行。

在實作翻譯功能的 TranslationViewController 中，先加入一個 function variable onScrollChangeListener，讓外部可以收到來自於翻譯結果網頁的捲動事件。

class TranslationViewController(
     private val activity: Activity,
     private val translationViewBinding: TranslationPanelBinding,
     private val twoPaneLayout: TwoPaneLayout,
     private val showTranslationAction: () -> Unit,
     private val onTranslationClosed: () -> Unit
     private val onTranslationClosed: () -> Unit,
     private val onScrollChangeListener: NinjaWebView.OnScrollChangeListener // 這一行
) { ... }

為翻譯網頁的 WebView 設定其 scrollListener 為外部傳進來的 OnScrollChangeListener。在 sync scroll 按鈕被點擊時， toggleSyncScroll 會被呼叫，進行同步捲動狀態的改變、按鈕圖案的切換、以及設定 WebView 的 scroll listener

private fun toggleSyncScroll(shouldSyncScroll: Boolean = false) {
         isScrollSynced = shouldSyncScroll
         val listener = if (isScrollSynced) onScrollChangeListener else null
         webView.setScrollChangeListener(listener)
         val drawable = if (isScrollSynced) R.drawable.selected_border_bg else R.drawable.backgound_with_border
         translationViewBinding.syncScroll.setBackgroundResource(drawable)
     }

將 TranslationViewController 做了擴充後，我們來看看怎麼在 BrowserActivity 中套用它。

private val translateController: TranslationViewController by lazy {
        TranslationViewController(
            this,
            binding.subContainer,
             binding.twoPanelLayout,
             { showTranslation() },
             { if (ninjaWebView.isReaderModeOn) ninjaWebView.toggleReaderMode() },
             object : NinjaWebView.OnScrollChangeListener {
                 override fun onScrollChange(scrollY: Int, oldScrollY: Int) {
                     val offset = scrollY - oldScrollY
                     ninjaWebView.scrollY += offset
                 }
             } //根據翻譯 WebView 捲動程度，同步反應到原文的 ninjaWebView 中
         )
     }

建立 TranslationViewController時，最後加入 OnScrollChangeListener 的實作，取 Translation 中的捲動情況，並反應在原本的 WebView (nijaWebView) 中。

示範影片

開啟同步捲動的話，在使用上更為方便！

原始碼參考版本

https://github.com/plateaukao/browser/releases/tag/v8.13.0