opensource/Cli-Proxy-API-Management-Center
3
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-09-24 16:04:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(config): jump correctly across horizontally snapped sections

Browse Source 
Field-search jumps used a single scrollIntoView that fought the full-mode sections' horizontal scroll-snap (scroll-snap-type: x mandatory + scroll-snap-align: start), so jumping from one section to a field in another landed on the wrong place. Switch the snap container to the target section instantly first, then scroll the field vertically with inline:'nearest' on the next frame so it can't re-trigger horizontal snapping.
This commit is contained in:
LTbinglingfeng
2026-06-19 01:59:18 +08:00
parent aa114b2643
commit 96e41f5975
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/config/VisualConfigEditor.tsx
+11 -3
View File
@@ -253,8 +253,9 @@ export function VisualConfigEditor({
const el = document.getElementById(configFieldDomId(fieldId));
if (!el) {
// Field not rendered right now (e.g. TLS cert while TLS is disabled) — fall back to section.
sectionRefs.current[sectionId]?.scrollIntoView({ behavior: 'smooth', block: 'start' });
// Field not rendered right now (e.g. TLS cert while TLS is disabled) — fall back to
// bringing its section into view horizontally.
sectionRefs.current[sectionId]?.scrollIntoView({ block: 'nearest', inline: 'start' });
return;
}
@@ -270,8 +271,15 @@ export function VisualConfigEditor({
highlightedElRef.current?.classList.remove(styles.fieldHighlightActive);
}
// Full-mode sections live in a horizontal scroll-snap container (`scroll-snap-type: x
// mandatory`). A single field-level scrollIntoView() tries to do the horizontal section
// switch AND the vertical field scroll at once, which the snap pulls back / lands wrong.
// So: (1) switch to the target section horizontally and instantly (no smooth → no snap
// fight), then (2) next frame, scroll the field vertically with inline:'nearest' so it
// can't re-trigger horizontal snapping.
sectionRefs.current[sectionId]?.scrollIntoView({ block: 'nearest', inline: 'start' });
requestAnimationFrame(() => {
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
el.classList.add(styles.fieldHighlightActive);
});
highlightedElRef.current = el;