Skip to content

Commit 6f7b058

Browse files
authored
Merge pull request #984 from PaloAltoNetworks/fix-code-snippet-scroll
Use scrollLeft to avoid scrolling entire page to active code tab
2 parents 0063174 + 1337735 commit 6f7b058

File tree

1 file changed

+22
-6
lines changed
  • packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs

1 file changed

+22
-6
lines changed

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeTabs/index.tsx

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,34 @@ function TabList({
4444
tabValues,
4545
}: CodeTabsProps & ReturnType<typeof useTabs>) {
4646
const tabRefs = useRef<(HTMLLIElement | null)[]>([]);
47+
const tabsScrollContainerRef = useRef<any>();
4748
const { blockElementScrollPositionUntilNextRender } =
4849
useScrollPositionBlocker();
4950

5051
useEffect(() => {
5152
const activeTab = tabRefs.current.find(
5253
(tab) => tab?.getAttribute("aria-selected") === "true"
5354
);
54-
if (activeTab) {
55-
activeTab.scrollIntoView({
56-
behavior: "auto",
57-
block: "center",
58-
inline: "start",
59-
});
55+
56+
if (activeTab && tabsScrollContainerRef.current) {
57+
const container = tabsScrollContainerRef.current;
58+
const containerRect = container.getBoundingClientRect();
59+
const activeTabRect = activeTab.getBoundingClientRect();
60+
61+
// Calculate the distance to scroll to align active tab to the left
62+
const glowOffset = 3;
63+
const scrollOffset =
64+
activeTabRect.left -
65+
containerRect.left +
66+
container.scrollLeft -
67+
glowOffset;
68+
69+
// Check if the active tab is not already at the left position
70+
71+
if (Math.abs(scrollOffset - container.scrollLeft) > 4) {
72+
// Adjust the scroll of the container
73+
container.scrollLeft = scrollOffset;
74+
}
6075
}
6176
}, []);
6277

@@ -139,6 +154,7 @@ function TabList({
139154
},
140155
className
141156
)}
157+
ref={tabsScrollContainerRef}
142158
>
143159
{tabValues.map(({ value, label, attributes }) => (
144160
<li

0 commit comments

Comments
 (0)