PySide6：如何隐藏QWebEngineView的滚动条？

问题根源 #

folium生成的HTML页面默认带有边距、内边距，再加上QWebEngineView的页面容器默认启用滚动设置，导致地图显示时出现不必要的滚动条，即便地图尺寸已经和控件匹配。

解决步骤 #

1. 给folium生成的HTML添加自定义CSS #

直接修改folium输出的HTML，清除页面默认边距并隐藏滚动条，确保地图容器占满整个页面：

def render_map(self):
    map_html = self.map._repr_html_()
    # 注入自定义样式
    custom_css = """
    <style>
        body { margin: 0; padding: 0; overflow: hidden; }
        .folium-map { position: absolute; top: 0; left: 0; }
    </style>
    """
    # 把样式插入到HTML的head部分
    if '<head>' in map_html:
        map_html = map_html.replace('<head>', f'<head>{custom_css}')
    else:
        map_html = f'{custom_css}{map_html}'
    self.setHtml(map_html)

2. 禁用QWebEngineView的滚动条 #

通过页面设置直接关闭滚动条显示，配合CSS双重保障：

def __init__(self):
    super().__init__()
    # ... 其他初始化代码 ...
    # 关闭页面滚动条
    self.page().settings().setAttribute(qtw.QWebEngineSettings.ShowScrollBars, False)

3. 修正初始尺寸获取的问题 #

控件初始化阶段self.width()和self.height()返回的是默认值，不是实际显示尺寸，改用showEvent在控件显示后再获取正确尺寸并初始化地图：

def __init__(self):
    super().__init__()
    self.setObjectName("my_map_plot")
    self.setAccessibleName("my_map_plot")
    self.initial_tileset='cartodbdark_matter'
    self.map = None  # 先不初始化地图
    self.page().settings().setAttribute(qtw.QWebEngineSettings.ShowScrollBars, False)
    self.show()

def showEvent(self, event):
    if not self.map:
        # 此时控件已显示，能获取到正确尺寸
        self.width_px = self.width() - 24
        self.height_px = self.height()
        self.map = folium.Map(location=[41.530, -70.679],zoom_start=14,tiles=self.initial_tileset, width=self.width_px,height=self.height_px)
        self.init_map()
        self.render_map()
    super().showEvent(event)

完整可运行代码 #

import folium
from PySide6 import QtWebEngineWidgets as qtwe
from PySide6 import QtWidgets as qtw
from PySide6 import QtCore as qtc

class MyMap(qtwe.QWebEngineView):

    def __init__(self):
        super().__init__()
        self.setObjectName("my_map_plot")
        self.setAccessibleName("my_map_plot")
        self.initial_tileset='cartodbdark_matter'
        self.map = None
        # 禁用页面滚动条
        self.page().settings().setAttribute(qtw.QWebEngineSettings.ShowScrollBars, False)
        self.show()
    
    def init_map(self):
        # 添加备选图层
        folium.TileLayer('cartodbpositron').add_to(self.map)
        folium.TileLayer('Stamen Terrain').add_to(self.map)
        folium.TileLayer('Stamen Toner').add_to(self.map)
        folium.TileLayer('Open Street Map').add_to(self.map)
   
        self.map.add_child(folium.LatLngPopup())
        whoi_marker_icon = folium.Icon(icon="globe",color="darkblue")
        folium.Marker([41.52417,-70.67151], icon=whoi_marker_icon,tooltip="WHOI", popup="Woods Hole Oceanographic Institution").add_to(self.map)
        # 图层控件放最后
        folium.LayerControl().add_to(self.map)  
          
    def showEvent(self, event):
        if not self.map:
            self.width_px = self.width() - 24
            self.height_px = self.height()
            self.map = folium.Map(location=[41.530, -70.679],zoom_start=14,tiles=self.initial_tileset, width=self.width_px,height=self.height_px)
            self.init_map()
            self.render_map()
        super().showEvent(event)

    def render_map(self):
        map_html = self.map._repr_html_()
        # 注入自定义样式清除边距、隐藏滚动条
        custom_css = """
        <style>
            body { margin: 0; padding: 0; overflow: hidden; }
            .folium-map { position: absolute; top: 0; left: 0; }
        </style>
        """
        # 将样式插入HTML头部
        if '<head>' in map_html:
            map_html = map_html.replace('<head>', f'<head>{custom_css}')
        else:
            map_html = f'{custom_css}{map_html}'
        self.setHtml(map_html)

# 测试用例
if __name__ == "__main__":
    app = qtw.QApplication([])
    main_window = qtw.QMainWindow()
    map_widget = MyMap()
    main_window.setCentralWidget(map_widget)
    main_window.resize(800, 600)
    main_window.show()
    app.exec()

内容的提问来源于stack exchange，提问作者Marcus