Blazor页面鼠标悬停Syncfusion图表时自动跳转至顶部问题

我开发了一个Blazor Web应用，使用Syncfusion Blazor Charts展示天气数据，Index.razor中的引用代码如下：

<div class="linechart">
    <h3>Mean Temperatures and Precipitation for @DateTime.Now.ToString("MMMM")</h3>
    <WeatherChart Temperatures="@Temperatures" Width="@Width" />
</div>

每当鼠标悬停在图表区域时，页面会自动跳转到顶部，但悬停<h3>或页面其他区域时无此异常，推测问题由图表自身行为导致。图表的完整实现代码如下：

<SfChart Width="@Width" >
<ChartPrimaryXAxis Title="Day" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" LabelIntersectAction="LabelIntersectAction.Hide">
    <ChartAxisMajorGridLines Width="0" Color="blue" />
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Temperatures"></ChartPrimaryYAxis>
<ChartAxes>
    <ChartAxis Name="YAxis" OpposedPosition="true" Title="Precipitation in mm"/>
</ChartAxes>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Temperatures" XName="X" High="High" Low="Low" Type="ChartSeriesType.RangeArea" Width="2" Fill="red" Opacity="0.1">
            <ChartMarker Visible="true" Height="5" Width="5" Shape="ChartShape.Circle" IsFilled="true" />
        </ChartSeries>
        <ChartSeries DataSource="@Temperatures" XName="X" YName="Precipitation" Type="ChartSeriesType.Column" YAxisName="YAxis" Fill="#FEC007" ColumnWidth="1.5">
        </ChartSeries>
    </ChartSeriesCollection>

    <ChartLegendSettings Visible="true" Position="LegendPosition.Top" />
</SfChart>

已实现JavaScript浏览器resize事件，问题出现与屏幕尺寸无关。

解决方案 #

1. 排查Tooltip是否为问题根源

这类页面跳转通常和图表的Tooltip组件行为有关。先尝试禁用Tooltip验证：

<SfChart Width="@Width">
    <!-- 保留原有所有配置 -->
    <ChartTooltip Visible="false"></ChartTooltip>
</SfChart>

如果禁用后跳转消失，说明是Tooltip触发了页面滚动。可以调整Tooltip的位置和偏移，避免触发滚动：

<ChartTooltip Visible="true" Position="TooltipPosition.Top" OffsetX="10" OffsetY="10">
</ChartTooltip>

2. 阻止图表区域的默认行为

若Tooltip不是原因，通过JavaScript阻止图表容器的默认事件，避免跳转：
在WeatherChart组件中注入IJSRuntime，添加渲染完成后的事件处理：

@inject IJSRuntime JSRuntime

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("preventChartJump", ".linechart");
    }
}

在wwwroot/index.html中添加对应脚本：

function preventChartJump(selector) {
    const container = document.querySelector(selector);
    if (container) {
        container.addEventListener('mouseover', (e) => {
            e.preventDefault();
            e.stopPropagation();
        }, true);
    }
}

3. 检查交互配置

确认是否启用了可能导致滚动的功能，比如缩放，若有则禁用：

<SfChart Width="@Width">
    <!-- 其他配置 -->
    <ChartZoomSettings EnableSelectionZooming="false" EnablePinchZooming="false"></ChartZoomSettings>
</SfChart>

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