Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

WebEngineView scrollPosition saving



  • 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)
            }
        }
    }
    
    


  • 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.


Log in to reply