如何实现两个JavaFX WebView的滚动条同步？

我来帮你搞定两个WebView同步滚动的需求！既然你的两个WebView里的文本行数、对应行长度完全一致，那我们可以通过监听滚动事件，将其中一个的滚动状态同步到另一个，同时避免循环触发的问题。

核心思路 #

• 监听每个WebView的滚动变化事件
• 当其中一个WebView滚动时，获取它的滚动偏移量（垂直方向用scrollY，水平方向用scrollX）
• 使用一个标志位避免循环触发（比如滚动WebView A时设置WebView B的滚动位置，此时WebView B的滚动事件不要反过来触发WebView A的设置）

示例代码（Android平台） #

以下是精简的最小可复现示例：

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class SyncWebViewActivity extends AppCompatActivity {
    private WebView mWebView1;
    private WebView mWebView2;
    // 标志位：避免滚动事件循环触发
    private boolean mIsScrolling = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sync_webview);

        mWebView1 = findViewById(R.id.webview1);
        mWebView2 = findViewById(R.id.webview2);

        // 加载两个内容严格对应的HTML文本
        String htmlContent1 = "<html><body>" + getLongText() + "</body></html>";
        String htmlContent2 = "<html><body style='color:blue;'>" + getLongText() + "</body></html>";

        mWebView1.loadData(htmlContent1, "text/html", "utf-8");
        mWebView2.loadData(htmlContent2, "text/html", "utf-8");

        // 设置WebViewClient确保页面加载完成后再监听滚动
        mWebView1.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                setupScrollListeners();
            }
        });
    }

    private void setupScrollListeners() {
        // WebView1滚动时同步到WebView2
        mWebView1.setOnScrollChangeListener((v, scrollX, scrollY, oldScrollX, oldScrollY) -> {
            if (!mIsScrolling) {
                mIsScrolling = true;
                mWebView2.scrollTo(scrollX, scrollY);
                mIsScrolling = false;
            }
        });

        // WebView2滚动时同步到WebView1
        mWebView2.setOnScrollChangeListener((v, scrollX, scrollY, oldScrollX, oldScrollY) -> {
            if (!mIsScrolling) {
                mIsScrolling = true;
                mWebView1.scrollTo(scrollX, scrollY);
                mIsScrolling = false;
            }
        });
    }

    // 生成测试用的长文本（行数/对应行长度一致）
    private String getLongText() {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < 100; i++) {
            sb.append("这是第").append(i+1).append("行测试文本，长度固定确保两个WebView对应行一致<br>");
        }
        return sb.toString();
    }
}

关键细节解释 #

• mIsScrolling标志位：这是核心，用来防止两个WebView的滚动事件互相触发，导致无限循环和卡顿。
• 滚动偏移量同步：因为你的文本行高、对应行长度完全一致，所以直接同步scrollY（垂直滚动）和scrollX（水平滚动）就能保证显示位置完全对应。
• 页面加载完成后再监听：要等WebView加载完HTML内容再设置滚动监听，避免页面未加载完成时滚动偏移量不准确。

其他平台适配思路 #

如果是iOS平台，思路完全一致：

1. 监听WKWebView（或UIWebView）的UIScrollView滚动事件（scrollViewDidScroll:）
2. 同样使用标志位避免循环触发
3. 同步contentOffset属性即可

内容的提问来源于stack exchange，提问作者Christoph Nievergelt