导航时侧边栏滚动位置重置, 活动项目可以关闭屏幕

我不能推我自己的分行 做公关 所以分享这个作为问题。 固定部分为 " 组件/Sidebar/index.jsx " 。

** 问题** 点击左侧边栏中的某个项目会导致全页重载,因为导航使用窗口. location.href在组件/Sidebar/index.jsx中. 重新装入后, 侧边栏的内部滚动位置会重新排入顶部 。

因此,当用户点击位于边栏列表下方的一页,如TypeScript或诊断下的一个项目时,所选择的项目可能仍然在活动,但已经无法看到. 然后,用户必须再次滚动到侧边栏以找到其当前位置.

** 复制步骤**

• 开放https://nodejs.org/learn
• 将左侧栏滚动到下行项上, 例如诊断 ~ 内存
• 单击项目
• 页面重新装入后, 侧边栏滚动位置已返回上方, 活动项已关闭屏幕

** 预期行为**

活性侧边栏项目在导航后应保持可见.

** 建议的固定办法**

当侧边栏上架时, 将活动链接定位在侧边栏 * * * aside * * 内 。 如果链接在侧边栏自己的滚动容器的可见部分之外,请调整 " aside.scrollTop " ,使活动项目以视线为中心。 这只会影响侧边栏的内部滚动位置,不会改变主窗口滚动.

** 实例办法**

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你来干什么? 使用效果( ()) {{{ 搁置=搁置 cons 活动 = 撇开?.querySelector(`a[href=]${CSS.escape(pathname)}') ; 如果,如果返回,

(单位:千美元) 活动. getBoundingClient Rect (). top - 边. getBoundingClient Rest (.). top + 一边去,一边去

收视Top=靠边.scrollTop; Cont 视图Bottom = 视图Top + 置一旁. ClientHeight ;

如果 (offsetTop + viewTop + active.offsetHeight + viewBottom) { 请将 校对:Soup 返回; {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?

置入.scrollTop = Math.max( 零点, 抵消Top - 置出. ClientHeight / 2 + 活动.offsetHeight / 2 (三) ,[路径名]);

** 说明**

这种方法使用由@node-core/ui- 组件/Contaners/Sidebar所暴露的现有前置Ref,因此不需要对上游或供应商进行更改。

** 备选审议**

将侧边栏的卷轴Top坚持到会话Storage跨重载被考虑,但被拒绝了. 这种方法增加了更复杂的内容,如在卸货时节省,水合时在适当时间恢复,并当侧柱结构改变时处理 stale 滚动状态.

确保活动项可见更简单,与大多数情况下的预期用户行为一致.