向与 touchmove 方向相反的方向滚动移动答案

【问题标题】：Scroll moving in the opposite direction to touchmove direction向与 touchmove 方向相反的方向滚动移动
【发布时间】：2020-07-05 02:16:20
【问题描述】：

我有一个在 NativeScript 应用程序中使用的 web 视图。问题在于，当发生滑动导致任一方向的动量滚动时，如果手机因资源不足或只是在后台执行某些操作而承受负载，则滚动方向将弹回错误的方向，而不是最初滑动的方向。代码：

<html>
    <body>
        <div style="height: 100000px;"> </div>

        <script src="./lib/jquery-3.4.1.min.js"></script>
        <script src="./my-script.js"></script>
    </body>
</html>


$(document).ready(function () {
    var lastY = 0; // Needed in order to determine direction of scroll.
    var lastTouchDirection;
    var lastScrollTop = 0;

    $("div").on('touchstart', function(event) {
        console.log('touchstart');
        lastY = event.touches[0].clientY;
    });

    $('div').on('touchmove', function(event) {
        console.log('touchmove');
        var top = event.touches[0].clientY;
        var direction = (lastY - top) < 0 ? "up" : "down";
        lastTouchDirection = direction;

        lastY = top;
    });

    $('div').on('touchend', function(event) {
        console.log('touchend');
    });

    $(window).scroll(function(event) {
        var st = $(this).scrollTop();
        if (st > lastScrollTop){
            console.log("downscroll")
            if (lastTouchDirection == "up") {
                console.log("wrong Direction")
            }
        } else {
            console.log("upscroll")
            if (lastTouchDirection == "down") {
                console.log("wrong Direction")
            }
        }
        lastScrollTop = st;
    });
});

正如您所看到的，这里没有任何独特之处，我拥有的代码用于检查触摸事件的最后一个方向以及滚动当前移动的方向。我猜这与 nativescript 和我正在使用的 webview 包有关，因为我没有在 nativescript 的内置 webview 中看到这个问题。

我的下一步是在检测到滚动方向错误时以编程方式更正滚动方向，但我希望我能纠正导致这种情况发生的任何原因。我在这里错过了什么？

NativeScript 版本：6.1.0 Web 视图包称为 nativescript-webview-interface，它用于在 nativescript 和 Web 视图之间进行双向通信。

【问题讨论】：

iOS和Android都存在这个问题？当你不使用 nativescript-webview-interface 时，它是否按预期工作？
@Manoj 它按预期工作是的，不幸的是我需要这个包，因为我找不到任何其他允许应用程序和 webview 之间通信的包。它同时存在于 iOS 和 Android 上。
你可以试试nativescript-webview-ext

标签： android jquery ios webview nativescript

【解决方案1】：

对于遇到此问题的任何人，我通过更正最终成为nativescript 中的错误的重负载源来纠正它。我不知道为什么这会对 webview 产生任何影响，但它就是这样。

【讨论】：