[Python] Is smooth scrolling possible with QtWebEngine?

I was creating a scrolling table for a Neutron app (Python, HTML, CSS using PyQt6 and QtWebEngine) and noticed the table scrolled smoothly (scroll animation) with the scroll wheel in the Live Preview for the HTML in VS Code (an Electron app) but did not when ran using Neutron. Instead it scrolls instantly.

The obvious first solution was to try scroll-behavior: smooth; on the table but that did not work.

I guessed that it was QtWebEngine's fault that smooth scrolling did not work, so I ripped out the minimum amount of code from my project and Neutron to reproduce it:

from PyQt6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from PyQt6.QtWebEngineWidgets import QWebEngineView
import sys

html = """
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<div class="scrollTableContainer">
<table class="scrollTable">
<thead>
<tr><th>Test</th></tr>
</thead>
<tbody>
<tr><td>item1</td></tr>
<tr><td>item2</td></tr>
<tr><td>item3</td></tr>
<tr><td>item4</td></tr>
<tr><td>item5</td></tr>
<tr><td>item6</td></tr>
<tr><td>item7</td></tr>
<tr><td>item8</td></tr>
<tr><td>item9</td></tr>
<tr><td>item10</td></tr>
</tbody>
</table>
</div>
</body>
</html>
<style>
.scrollTableContainer {
height: 150px;
overflow-y: auto;
font-size: 12px;
scroll-behavior: smooth;
}
.scrollTable {
width: 100%;
}
.scrollTable th, .scrollTable td {
border: 1px solid black;
}
.scrollTable th {
background: gray;
position: sticky;
top: 0;
}
</style>
"""

sys.argv.append('--enable-smooth-scrolling')
app = QApplication(sys.argv)

window = QMainWindow()
window.setWindowTitle("test")

central_widget = QWidget()
layout = QVBoxLayout(central_widget)
window.setCentralWidget(central_widget)

view = QWebEngineView()
view.setHtml(html)
layout.addWidget(view)

window.show()
sys.exit(app.exec())


Here's the HTML from that Python as a Stack Snippet. It scrolls smoothly in my browser at least.


.scrollTableContainer {
height: 150px;
overflow-y: auto;
font-size: 12px;
scroll-behavior: smooth;
}
.scrollTable {
width: 100%;
}
.scrollTable th, .scrollTable td {
border: 1px solid black;
}
.scrollTable th {
background: gray;
position: sticky;
top: 0;
}

<div class="scrollTableContainer">
<table class="scrollTable">
<thead>
<tr><th>Test</th></tr>
</thead>
<tbody>
<tr><td>item1</td></tr>
<tr><td>item2</td></tr>
<tr><td>item3</td></tr>
<tr><td>item4</td></tr>
<tr><td>item5</td></tr>
<tr><td>item6</td></tr>
<tr><td>item7</td></tr>
<tr><td>item8</td></tr>
<tr><td>item9</td></tr>
<tr><td>item10</td></tr>
</tbody>
</table>
</div>

As can be seen in the Python code, I tried this solution of adding --enable-smooth-scrolling to sys.argv which are passed as arguments to QApplication. This also did not work. I searched the docs for QApplication but didn't find any reference to this argument, despite it being told as a solution elsewhere. In the docs it seemed that arguments only needed one hyphen but that did not work either.

I found another question that may or may not be relevant depending on how QtWebEngine works. (This is my first foray into Qt.)

I also found this accepted solution containing code which upon running doesn't even scroll smoothly for me. This makes me wonder if something has broken between now and then or if this is just a problem with my system. I have reinstalled PyQt6-WebEngine and PyQt6-WebEngine-Qt6.


So can smooth scrolling work with HTML given to QtWebEngine so that it will work in my Neutron app? Is there a jank solution worth pursuing?

Sorry if I've made mistakes here! This is my first question and I'm probably not a good or experienced coder either!

Continue reading...