怎么判断webview滚动到最下方？

HarmonyOS

put_get

2024-10-14 11:57:33

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

要判断一个 WebView 是否滚动到最下方，可以通过在 JavaScript 中检查当前的滚动位置和文档的总高度。下面是一些常见的方法，具体实现可能根据所使用的平台（如 Android, iOS）有所不同。

### 在Android中使用WebView

在 Android 上，你可以通过 JavaScript 与 WebView 交互来检测滚动位置：

启用 JavaScript 支持：确保你的 WebView 启用了 JavaScript：

WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);

添加 JavaScript 接口：创建一个接口，用于接收 JavaScript 的回调：

public class WebAppInterface {
    Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void onScrollBottom() {
        // 响应滚动到底部事件
        Toast.makeText(mContext, "Scrolled to bottom", Toast.LENGTH_SHORT).show();
    }
}

绑定接口到 WebView：

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

注入 JavaScript 检测代码：在加载网页时，注入 JavaScript 来监听滚动事件：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        // 注入 JavaScript
        view.loadUrl("javascript:(function() {" +
            "window.onscroll = function() {" +
                "if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {" +
                    "Android.onScrollBottom();" +
                "}" +
            "};" +
        "})()");
    }
});

这样，当用户滚动到页面底部时，JavaScript 会调用 Android.onScrollBottom() 方法。

### 在iOS中使用WKWebView

在 iOS 平台上的 WKWebView，可以使用 JavaScript 来获取滚动位置并使用 Swift 或 Objective-C 进行判断：

启用 JavaScript：默认情况下，WKWebView 是支持 JavaScript 的。
注入 JavaScript：在页面加载完成后，通过 evaluateJavaScript 方法执行脚本：

webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
    if complete != nil {
        self.webView.evaluateJavaScript("window.onscroll = function() {" +
            "if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {" +
                "window.webkit.messageHandlers.scrollHandler.postMessage('bottom');" +
            "}" +
        "};", completionHandler: nil)
    }
})

设置消息处理器：使用 WKScriptMessageHandler 来接收来自 JavaScript 的消息：

class ViewController: UIViewController, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "scrollHandler", let messageBody = message.body as? String {
            if messageBody == "bottom" {
                print("Scrolled to bottom")
            }
        }
    }
}

通过这些方法，你可以在不同的平台上检测 WebView 是否滚动到了最下方。请注意，这些解决方案假设你有权访问网页内容并能安全地执行 JavaScript。如果是加载第三方网页，这种方法可能会受到限制。

2024-10-14 13:51:56

zxjiu

可以在onPageEnd事件回调获取web组件的内容高度，在onScroll事件中判断是否滚动到最底部。

// demo.ets  
import web_webview from '@ohos.web.webview'  
  
@Entry  
@Component  
struct WebComponent {  
  webviewController: web_webview.WebviewController = new web_webview.WebviewController()  
  @State webHeight: number = 0  
  
  build() {  
    Column() {  
      Web({ src: 'www.example.com', controller: this.webviewController })  
        .onPageEnd((event) => {  
          console.log('onPageEnd:::::::')  
          this.webHeight = this.webviewController.getPageHeight()  
          console.log('webHeight = ' + this.webHeight)  
        })  
        .onScroll(event => {  
          console.log('scroll::::::' + event.yOffset)  
          if (event.yOffset === this.webHeight) {  
            console.log('reach end:::::')  
          }  
        })  
    }  
  }

2024-10-14 15:46:38

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

怎么判断webview滚动到最下方？

订阅鸿蒙技术特刊，精选内容抢先看