WebEngineView scrollPosition saving

The3DmaN

I am trying to restore the last scroll y (vertical) position of a html with JS webpage in WebEngineView. I am able to save the scrollPosition.y to a setting onDestruction, however, when I re-open the app, it loads scrolled slightly more than where it saved the setting, then if I close the app without any additional scrolling, scrollPosition gives a different number and again it is larger than the previous time. Each time I open the app even without scrolling the page, the scrollPosition seems to be increasing, and for the life of me I cant figure out why. Hoping someone can help with this.

You can see this in my console output:

Output First Load:
qml: My Setting on load: 89
qml: webview scrollPosition on load 0
qml: onDestruction:
qml: My Setting: 105
qml: webview scrollPosition 105
qml: My Setting after destruction: 105

Output Second Load (No Scroll Change):
qml: My Setting on load: 105
qml: webview scrollPosition on load 0
qml: onDestruction:
qml: My Setting: 125
qml: webview scrollPosition 125
qml: My Setting after destruction: 125

You can see that the setting increased from 105 to 125 and no additional scrolling was done in the app. The app was just run then closed right away and reopened

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.1
import QtWebEngine 1.8
import Qt.labs.settings 1.1

Page {

    id: book
    title: {
        if (themeSwitch.checked) {
            qsTr("<font color=\"antiquewhite\">Book1</font>")

        } else {
            qsTr("<font color=\"dimgrey\">Book1</font>")

        }
    }
    // Old code: property string pagepos: "document.body.scrollTo(0, " + settings.scrollposy +");"
    property string pagepos: ("document.body.scrollTo(%1, %2);").arg(0).arg(settings.scrollposy)

    Component.onDestruction: {
        console.log("onDestruction:")
        console.log("My Setting: " +settings.scrollposy)
        console.log("webview scrollPosition " +webview.scrollPosition.y)
        settings.scrollposy = webview.scrollPosition.y
        console.log("My Setting after destruction: " + settings.scrollposy)
    }

    footer: ToolBar {
        contentHeight: toolButton.implicitHeight
        Material.theme: {
                    if (themeSwitch.checked) {
                        Material.primary="dimgrey"
                        Material.foreground="antiquewhite"
                        Material.background="dimgrey"
                        Material.accent="antiquewhite"
                        stackView.replace("Book1.qml")
                    } else {
                        Material.primary="antiquewhite"
                        Material.foreground="dimgrey"
                        Material.background="antiquewhite"
                        Material.accent="dimgrey"
                        stackView.replace("Book1.qml")
                    }
                }

        Row {
            anchors.horizontalCenter: parent.horizontalCenter
            ToolButton {
                id: toolButtonZI
                text: "+ Zoom In"
                font.pixelSize: Qt.application.font.pixelSize
                onClicked: {
                    settings.zoomlevel = settings.zoomlevel + 0.1
                }
            }
            ToolButton {
                id: toolButtonZO
                text: "- Zoom Out"
                font.pixelSize: Qt.application.font.pixelSize
                onClicked: {
                    settings.zoomlevel = settings.zoomlevel - 0.1
                }
            }
        }
    }


    Settings {
        id: settings
        property real zoomlevel: 1.0
        property real scrollposy: webview.scrollPosition.y
    }

    WebEngineView {
        id: webview
        anchors.fill: parent
        anchors.margins: 10
        backgroundColor: "#00000000"
        settings.showScrollBars: true
        settings.javascriptEnabled: true
        settings.localContentCanAccessFileUrls: true
        url: {
            if (themeSwitch.checked) {
                "qrc:files/bible/01-Book1-Dark"
            } else {
                "qrc:files/bible/01-Book1"
            }

        }
        zoomFactor: settings.zoomlevel

        onJavaScriptConsoleMessage: {
            webview.runJavaScript(book.pagepos)
            console.log("My Setting on load: " + settings.scrollposy)
            console.log("webview scrollPosition on load " +webview.scrollPosition.y)
        }
    }
}

The3DmaN

I was able to resolve this by moving all my JS tags just before my </body> tag in my html. I found that loading my JS in the <head> tag was causing this.