[{"data":1,"prerenderedAt":2568},["ShallowReactive",2],{"content-/table-of-contents-sticky-issue":3,"all-pages-for-dir":2546,"related-/table-of-contents-sticky-issue":2547,"og-image-/table-of-contents-sticky-issue":2567},{"id":4,"title":5,"body":6,"category":2530,"concepts":2530,"description":2531,"extension":2532,"meta":2533,"navigation":649,"ogImage":2530,"path":2534,"project_name":2530,"published":2535,"publishedAt":2536,"seo":2537,"source":2530,"stem":2538,"tags":2539,"todo":2530,"unpublished":2535,"updatedAt":2530,"__hash__":2545},"pages/2025-11/2025-11-27/table-of-contents-sticky-issue.md","マークダウンページの目次がスクロール時に固定表示されない問題",{"type":7,"value":8,"toc":2503},"minimark",[9,12,16,25,29,42,45,58,61,65,72,78,126,130,143,179,185,189,200,206,442,445,454,478,483,491,502,506,588,591,607,668,673,677,682,687,798,803,866,871,875,878,1174,1177,1288,1297,1301,1310,1544,1551,1555,1566,1573,1619,1643,1658,1661,1674,1793,1802,1806,1809,1812,1815,1818,1828,1831,1844,1886,1945,1955,2416,2419,2451,2453,2456,2459,2478,2481,2499],[10,11,5],"h1",{"id":5},[13,14,15],"h2",{"id":15},"問題の症状",[17,18,19,20,24],"p",{},"マークダウンページ（",[21,22,23],"code",{},"[...slug].vue","経由で表示されるページ）で、右側に表示されている目次（Table of Contents）がスクロール時に固定表示されず、コンテンツと一緒に上に移動して画面外に消えてしまう。",[26,27,28],"h3",{"id":28},"期待される動作",[30,31,32,36],"ul",{},[33,34,35],"li",{},"ページをスクロールしても目次が画面上部に固定表示される",[33,37,38,41],{},[21,39,40],{},"position: sticky","により、目次が常に見える状態を維持",[26,43,44],{"id":44},"実際の動作",[30,46,47,50,55],{},[33,48,49],{},"スクロールすると目次がコンテンツと一緒に上に移動する",[33,51,52,54],{},[21,53,40],{},"が機能していない",[33,56,57],{},"目次が画面外に消えてしまう",[13,59,60],{"id":60},"原因の調査プロセス",[26,62,64],{"id":63},"_1-初期仮説誤り","1. 初期仮説（誤り）",[17,66,67,68,71],{},"最初に疑ったのは、グリッドレイアウトの",[21,69,70],{},"justify-content: center","が原因ではないかという点。",[17,73,74],{},[75,76,77],"strong",{},"DocPage.vue:367-373",[79,80,85],"pre",{"className":81,"code":82,"language":83,"meta":84,"style":84},"language-vue shiki shiki-themes vitesse-light vitesse-light",".doc-container {\n  display: grid;\n  grid-template-columns: minmax(0, 800px) 300px;\n  gap: 3rem;\n  justify-content: center;  // ← これが原因？\n}\n","vue","",[21,86,87,96,102,108,114,120],{"__ignoreMap":84},[88,89,92],"span",{"class":90,"line":91},"line",1,[88,93,95],{"class":94},"sG7-3",".doc-container {\n",[88,97,99],{"class":90,"line":98},2,[88,100,101],{"class":94},"  display: grid;\n",[88,103,105],{"class":90,"line":104},3,[88,106,107],{"class":94},"  grid-template-columns: minmax(0, 800px) 300px;\n",[88,109,111],{"class":90,"line":110},4,[88,112,113],{"class":94},"  gap: 3rem;\n",[88,115,117],{"class":90,"line":116},5,[88,118,119],{"class":94},"  justify-content: center;  // ← これが原因？\n",[88,121,123],{"class":90,"line":122},6,[88,124,125],{"class":94},"}\n",[127,128,129],"h4",{"id":129},"試した修正1",[17,131,132,134,135,138,139,142],{},[21,133,70],{},"を",[21,136,137],{},"max-width","と",[21,140,141],{},"margin: 0 auto","に変更：",[79,144,146],{"className":81,"code":145,"language":83,"meta":84,"style":84},".doc-container {\n  display: grid;\n  grid-template-columns: minmax(0, 800px) 300px;\n  gap: 3rem;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n",[21,147,148,152,156,160,164,169,174],{"__ignoreMap":84},[88,149,150],{"class":90,"line":91},[88,151,95],{"class":94},[88,153,154],{"class":90,"line":98},[88,155,101],{"class":94},[88,157,158],{"class":90,"line":104},[88,159,107],{"class":94},[88,161,162],{"class":90,"line":110},[88,163,113],{"class":94},[88,165,166],{"class":90,"line":116},[88,167,168],{"class":94},"  max-width: 1200px;\n",[88,170,171],{"class":90,"line":122},[88,172,173],{"class":94},"  margin: 0 auto;\n",[88,175,177],{"class":90,"line":176},7,[88,178,125],{"class":94},[17,180,181,184],{},[75,182,183],{},"結果",": 問題は解決せず",[26,186,188],{"id":187},"_2-グリッドアイテムの高さ制限部分的な原因","2. グリッドアイテムの高さ制限（部分的な原因）",[17,190,191,192,195,196,199],{},"次に発見したのは、グリッドレイアウトのデフォルト動作（",[21,193,194],{},"align-items: stretch","）により、",[21,197,198],{},".doc-sidebar","が記事全体の高さ（7094px）に引き伸ばされていた点。",[17,201,202,205],{},[75,203,204],{},"Chrome DevToolsでの調査結果",":",[79,207,211],{"className":208,"code":209,"language":210,"meta":84,"style":84},"language-json shiki shiki-themes vitesse-light vitesse-light","{\n  \"sidebar\": {\n    \"position\": \"static\",\n    \"height\": \"7094.58px\",  // 記事全体の高さに引き伸ばされている\n    \"rect\": {\n      \"top\": -1903.515625,\n      \"height\": 7094.578125\n    }\n  },\n  \"toc\": {\n    \"position\": \"sticky\",\n    \"top\": \"16px\",\n    \"rect\": {\n      \"top\": -1903.515625  // stickyが機能していない\n    }\n  }\n}\n","json",[21,212,213,219,237,262,287,300,318,331,337,343,357,377,397,410,426,431,437],{"__ignoreMap":84},[88,214,215],{"class":90,"line":91},[88,216,218],{"class":217},"shFtX","{\n",[88,220,221,225,229,232,234],{"class":90,"line":98},[88,222,224],{"class":223},"sqvqQ","  \"",[88,226,228],{"class":227},"sz8Xr","sidebar",[88,230,231],{"class":223},"\"",[88,233,205],{"class":217},[88,235,236],{"class":217}," {\n",[88,238,239,242,245,247,249,253,257,259],{"class":90,"line":104},[88,240,241],{"class":223},"    \"",[88,243,244],{"class":227},"position",[88,246,231],{"class":223},[88,248,205],{"class":217},[88,250,252],{"class":251},"sMJiu"," \"",[88,254,256],{"class":255},"sdGka","static",[88,258,231],{"class":251},[88,260,261],{"class":217},",\n",[88,263,264,266,269,271,273,275,278,280,283],{"class":90,"line":110},[88,265,241],{"class":223},[88,267,268],{"class":227},"height",[88,270,231],{"class":223},[88,272,205],{"class":217},[88,274,252],{"class":251},[88,276,277],{"class":255},"7094.58px",[88,279,231],{"class":251},[88,281,282],{"class":217},",",[88,284,286],{"class":285},"sxvE3","  // 記事全体の高さに引き伸ばされている\n",[88,288,289,291,294,296,298],{"class":90,"line":116},[88,290,241],{"class":223},[88,292,293],{"class":227},"rect",[88,295,231],{"class":223},[88,297,205],{"class":217},[88,299,236],{"class":217},[88,301,302,305,308,310,312,316],{"class":90,"line":122},[88,303,304],{"class":223},"      \"",[88,306,307],{"class":227},"top",[88,309,231],{"class":223},[88,311,205],{"class":217},[88,313,315],{"class":314},"sM54T"," -1903.515625",[88,317,261],{"class":217},[88,319,320,322,324,326,328],{"class":90,"line":176},[88,321,304],{"class":223},[88,323,268],{"class":227},[88,325,231],{"class":223},[88,327,205],{"class":217},[88,329,330],{"class":314}," 7094.578125\n",[88,332,334],{"class":90,"line":333},8,[88,335,336],{"class":217},"    }\n",[88,338,340],{"class":90,"line":339},9,[88,341,342],{"class":217},"  },\n",[88,344,346,348,351,353,355],{"class":90,"line":345},10,[88,347,224],{"class":223},[88,349,350],{"class":227},"toc",[88,352,231],{"class":223},[88,354,205],{"class":217},[88,356,236],{"class":217},[88,358,360,362,364,366,368,370,373,375],{"class":90,"line":359},11,[88,361,241],{"class":223},[88,363,244],{"class":227},[88,365,231],{"class":223},[88,367,205],{"class":217},[88,369,252],{"class":251},[88,371,372],{"class":255},"sticky",[88,374,231],{"class":251},[88,376,261],{"class":217},[88,378,380,382,384,386,388,390,393,395],{"class":90,"line":379},12,[88,381,241],{"class":223},[88,383,307],{"class":227},[88,385,231],{"class":223},[88,387,205],{"class":217},[88,389,252],{"class":251},[88,391,392],{"class":255},"16px",[88,394,231],{"class":251},[88,396,261],{"class":217},[88,398,400,402,404,406,408],{"class":90,"line":399},13,[88,401,241],{"class":223},[88,403,293],{"class":227},[88,405,231],{"class":223},[88,407,205],{"class":217},[88,409,236],{"class":217},[88,411,413,415,417,419,421,423],{"class":90,"line":412},14,[88,414,304],{"class":223},[88,416,307],{"class":227},[88,418,231],{"class":223},[88,420,205],{"class":217},[88,422,315],{"class":314},[88,424,425],{"class":285},"  // stickyが機能していない\n",[88,427,429],{"class":90,"line":428},15,[88,430,336],{"class":217},[88,432,434],{"class":90,"line":433},16,[88,435,436],{"class":217},"  }\n",[88,438,440],{"class":90,"line":439},17,[88,441,125],{"class":217},[127,443,444],{"id":444},"試した修正2",[17,446,447,449,450,453],{},[21,448,198],{},"に",[21,451,452],{},"align-self: start","を追加：",[79,455,457],{"className":81,"code":456,"language":83,"meta":84,"style":84},".doc-sidebar {\n  display: block;\n  align-self: start;  // ← 追加\n}\n",[21,458,459,464,469,474],{"__ignoreMap":84},[88,460,461],{"class":90,"line":91},[88,462,463],{"class":94},".doc-sidebar {\n",[88,465,466],{"class":90,"line":98},[88,467,468],{"class":94},"  display: block;\n",[88,470,471],{"class":90,"line":104},[88,472,473],{"class":94},"  align-self: start;  // ← 追加\n",[88,475,476],{"class":90,"line":110},[88,477,125],{"class":94},[17,479,480,482],{},[75,481,183],{},": サイドバーの高さは493pxに縮小したが、stickyは依然として機能せず",[26,484,486,487,490],{"id":485},"_3-グリッドコンテナのalign-items設定","3. グリッドコンテナの",[21,488,489],{},"align-items","設定",[17,492,493,449,495,497,498,501],{},[21,494,198],{},[21,496,452],{},"を設定すると、サイドバーが縮小されすぎて、中の",[21,499,500],{},".toc","がコンテナの高さに制限されてしまう問題が発生。",[17,503,504,205],{},[75,505,204],{},[79,507,509],{"className":208,"code":508,"language":210,"meta":84,"style":84},"{\n  \"sidebar\": {\n    \"height\": \"493.078px\",  // TOCの内容の高さに縮小\n    \"rect\": {\n      \"top\": -1903.515625  // 画面外\n    }\n  }\n}\n",[21,510,511,515,527,549,561,576,580,584],{"__ignoreMap":84},[88,512,513],{"class":90,"line":91},[88,514,218],{"class":217},[88,516,517,519,521,523,525],{"class":90,"line":98},[88,518,224],{"class":223},[88,520,228],{"class":227},[88,522,231],{"class":223},[88,524,205],{"class":217},[88,526,236],{"class":217},[88,528,529,531,533,535,537,539,542,544,546],{"class":90,"line":104},[88,530,241],{"class":223},[88,532,268],{"class":227},[88,534,231],{"class":223},[88,536,205],{"class":217},[88,538,252],{"class":251},[88,540,541],{"class":255},"493.078px",[88,543,231],{"class":251},[88,545,282],{"class":217},[88,547,548],{"class":285},"  // TOCの内容の高さに縮小\n",[88,550,551,553,555,557,559],{"class":90,"line":110},[88,552,241],{"class":223},[88,554,293],{"class":227},[88,556,231],{"class":223},[88,558,205],{"class":217},[88,560,236],{"class":217},[88,562,563,565,567,569,571,573],{"class":90,"line":116},[88,564,304],{"class":223},[88,566,307],{"class":227},[88,568,231],{"class":223},[88,570,205],{"class":217},[88,572,315],{"class":314},[88,574,575],{"class":285},"  // 画面外\n",[88,577,578],{"class":90,"line":122},[88,579,336],{"class":217},[88,581,582],{"class":90,"line":176},[88,583,436],{"class":217},[88,585,586],{"class":90,"line":333},[88,587,125],{"class":217},[127,589,590],{"id":590},"試した修正3",[17,592,593,449,596,599,600,602,603,606],{},[21,594,595],{},".doc-container",[21,597,598],{},"align-items: start","を追加し、",[21,601,198],{},"の",[21,604,605],{},"align-self","を削除：",[79,608,610],{"className":81,"code":609,"language":83,"meta":84,"style":84},".doc-container {\n  display: grid;\n  grid-template-columns: minmax(0, 800px) 300px;\n  gap: 3rem;\n  max-width: 1200px;\n  margin: 0 auto;\n  align-items: start;  // ← 追加\n}\n\n.doc-sidebar {\n  display: block;\n  // align-self: start を削除\n}\n",[21,611,612,616,620,624,628,632,636,641,645,651,655,659,664],{"__ignoreMap":84},[88,613,614],{"class":90,"line":91},[88,615,95],{"class":94},[88,617,618],{"class":90,"line":98},[88,619,101],{"class":94},[88,621,622],{"class":90,"line":104},[88,623,107],{"class":94},[88,625,626],{"class":90,"line":110},[88,627,113],{"class":94},[88,629,630],{"class":90,"line":116},[88,631,168],{"class":94},[88,633,634],{"class":90,"line":122},[88,635,173],{"class":94},[88,637,638],{"class":90,"line":176},[88,639,640],{"class":94},"  align-items: start;  // ← 追加\n",[88,642,643],{"class":90,"line":333},[88,644,125],{"class":94},[88,646,647],{"class":90,"line":339},[88,648,650],{"emptyLinePlaceholder":649},true,"\n",[88,652,653],{"class":90,"line":345},[88,654,463],{"class":94},[88,656,657],{"class":90,"line":359},[88,658,468],{"class":94},[88,660,661],{"class":90,"line":379},[88,662,663],{"class":94},"  // align-self: start を削除\n",[88,665,666],{"class":90,"line":399},[88,667,125],{"class":94},[17,669,670,672],{},[75,671,183],{},": サイドバーの高さは適切になったが、stickyは依然として機能せず",[26,674,676],{"id":675},"_4-グリッドアイテムとしての直接配置","4. グリッドアイテムとしての直接配置",[17,678,679,681],{},[21,680,198],{},"というラッパー要素を削除し、TableOfContentsコンポーネントを直接グリッドアイテムとして配置。",[17,683,684],{},[75,685,686],{},"DocPage.vue:360",[79,688,690],{"className":81,"code":689,"language":83,"meta":84,"style":84},"\u003C!-- 修正前 -->\n\u003Caside class=\"doc-sidebar\">\n  \u003CTableOfContents :links=\"doc.body?.toc?.links\" />\n\u003C/aside>\n\n\u003C!-- 修正後 -->\n\u003CTableOfContents :links=\"doc.body?.toc?.links\" class=\"doc-toc\" />\n",[21,691,692,697,723,728,737,741,746],{"__ignoreMap":84},[88,693,694],{"class":90,"line":91},[88,695,696],{"class":285},"\u003C!-- 修正前 -->\n",[88,698,699,702,706,710,713,715,718,720],{"class":90,"line":98},[88,700,701],{"class":217},"\u003C",[88,703,705],{"class":704},"sHkkW","aside",[88,707,709],{"class":708},"s4oTP"," class",[88,711,712],{"class":217},"=",[88,714,231],{"class":251},[88,716,717],{"class":255},"doc-sidebar",[88,719,231],{"class":251},[88,721,722],{"class":217},">\n",[88,724,725],{"class":90,"line":104},[88,726,727],{"class":94},"  \u003CTableOfContents :links=\"doc.body?.toc?.links\" />\n",[88,729,730,733,735],{"class":90,"line":110},[88,731,732],{"class":217},"\u003C/",[88,734,705],{"class":704},[88,736,722],{"class":217},[88,738,739],{"class":90,"line":116},[88,740,650],{"emptyLinePlaceholder":649},[88,742,743],{"class":90,"line":122},[88,744,745],{"class":285},"\u003C!-- 修正後 -->\n",[88,747,748,750,753,756,760,762,764,767,770,773,776,778,780,782,784,786,788,790,793,795],{"class":90,"line":176},[88,749,701],{"class":217},[88,751,752],{"class":704},"TableOfContents",[88,754,755],{"class":217}," :",[88,757,759],{"class":758},"senZ8","links",[88,761,712],{"class":217},[88,763,231],{"class":217},[88,765,766],{"class":708},"doc",[88,768,769],{"class":217},".",[88,771,772],{"class":708},"body",[88,774,775],{"class":217},"?.",[88,777,350],{"class":708},[88,779,775],{"class":217},[88,781,759],{"class":708},[88,783,231],{"class":217},[88,785,709],{"class":708},[88,787,712],{"class":217},[88,789,231],{"class":251},[88,791,792],{"class":255},"doc-toc",[88,794,231],{"class":251},[88,796,797],{"class":217}," />\n",[17,799,800],{},[75,801,802],{},"CSS:",[79,804,806],{"className":81,"code":805,"language":83,"meta":84,"style":84},".doc-toc {\n  display: block;\n}\n\n@media (max-width: 1024px) {\n  .doc-container {\n    grid-template-columns: 1fr;\n  }\n\n  .doc-toc {\n    display: none;\n  }\n}\n",[21,807,808,813,817,821,825,830,835,840,844,848,853,858,862],{"__ignoreMap":84},[88,809,810],{"class":90,"line":91},[88,811,812],{"class":94},".doc-toc {\n",[88,814,815],{"class":90,"line":98},[88,816,468],{"class":94},[88,818,819],{"class":90,"line":104},[88,820,125],{"class":94},[88,822,823],{"class":90,"line":110},[88,824,650],{"emptyLinePlaceholder":649},[88,826,827],{"class":90,"line":116},[88,828,829],{"class":94},"@media (max-width: 1024px) {\n",[88,831,832],{"class":90,"line":122},[88,833,834],{"class":94},"  .doc-container {\n",[88,836,837],{"class":90,"line":176},[88,838,839],{"class":94},"    grid-template-columns: 1fr;\n",[88,841,842],{"class":90,"line":333},[88,843,436],{"class":94},[88,845,846],{"class":90,"line":339},[88,847,650],{"emptyLinePlaceholder":649},[88,849,850],{"class":90,"line":345},[88,851,852],{"class":94},"  .doc-toc {\n",[88,854,855],{"class":90,"line":359},[88,856,857],{"class":94},"    display: none;\n",[88,859,860],{"class":90,"line":379},[88,861,436],{"class":94},[88,863,864],{"class":90,"line":399},[88,865,125],{"class":94},[17,867,868,870],{},[75,869,183],{},": 依然としてstickyが機能しない",[26,872,874],{"id":873},"_5-グリッドアイテムの実際の構造確認","5. グリッドアイテムの実際の構造確認",[17,876,877],{},"Chrome DevToolsで実際のDOM構造とスタイルを確認：",[79,879,881],{"className":208,"code":880,"language":210,"meta":84,"style":84},"{\n  \"containerDisplay\": \"grid\",\n  \"containerAlignItems\": \"start\",\n  \"children\": [\n    {\n      \"tag\": \"ARTICLE\",\n      \"className\": \"doc\",\n      \"position\": \"static\",\n      \"height\": \"7094.58px\"\n    },\n    {\n      \"tag\": \"NAV\",\n      \"className\": \"toc doc-toc\",\n      \"position\": \"sticky\",\n      \"top\": \"16px\",\n      \"height\": \"459.078px\",\n      \"rect\": {\n        \"top\": 96.484375  // 初期位置\n      }\n    }\n  ]\n}\n",[21,882,883,887,907,927,941,946,966,985,1003,1020,1025,1029,1048,1067,1085,1103,1122,1134,1152,1158,1163,1169],{"__ignoreMap":84},[88,884,885],{"class":90,"line":91},[88,886,218],{"class":217},[88,888,889,891,894,896,898,900,903,905],{"class":90,"line":98},[88,890,224],{"class":223},[88,892,893],{"class":227},"containerDisplay",[88,895,231],{"class":223},[88,897,205],{"class":217},[88,899,252],{"class":251},[88,901,902],{"class":255},"grid",[88,904,231],{"class":251},[88,906,261],{"class":217},[88,908,909,911,914,916,918,920,923,925],{"class":90,"line":104},[88,910,224],{"class":223},[88,912,913],{"class":227},"containerAlignItems",[88,915,231],{"class":223},[88,917,205],{"class":217},[88,919,252],{"class":251},[88,921,922],{"class":255},"start",[88,924,231],{"class":251},[88,926,261],{"class":217},[88,928,929,931,934,936,938],{"class":90,"line":110},[88,930,224],{"class":223},[88,932,933],{"class":227},"children",[88,935,231],{"class":223},[88,937,205],{"class":217},[88,939,940],{"class":217}," [\n",[88,942,943],{"class":90,"line":116},[88,944,945],{"class":217},"    {\n",[88,947,948,950,953,955,957,959,962,964],{"class":90,"line":122},[88,949,304],{"class":223},[88,951,952],{"class":227},"tag",[88,954,231],{"class":223},[88,956,205],{"class":217},[88,958,252],{"class":251},[88,960,961],{"class":255},"ARTICLE",[88,963,231],{"class":251},[88,965,261],{"class":217},[88,967,968,970,973,975,977,979,981,983],{"class":90,"line":176},[88,969,304],{"class":223},[88,971,972],{"class":227},"className",[88,974,231],{"class":223},[88,976,205],{"class":217},[88,978,252],{"class":251},[88,980,766],{"class":255},[88,982,231],{"class":251},[88,984,261],{"class":217},[88,986,987,989,991,993,995,997,999,1001],{"class":90,"line":333},[88,988,304],{"class":223},[88,990,244],{"class":227},[88,992,231],{"class":223},[88,994,205],{"class":217},[88,996,252],{"class":251},[88,998,256],{"class":255},[88,1000,231],{"class":251},[88,1002,261],{"class":217},[88,1004,1005,1007,1009,1011,1013,1015,1017],{"class":90,"line":339},[88,1006,304],{"class":223},[88,1008,268],{"class":227},[88,1010,231],{"class":223},[88,1012,205],{"class":217},[88,1014,252],{"class":251},[88,1016,277],{"class":255},[88,1018,1019],{"class":251},"\"\n",[88,1021,1022],{"class":90,"line":345},[88,1023,1024],{"class":217},"    },\n",[88,1026,1027],{"class":90,"line":359},[88,1028,945],{"class":217},[88,1030,1031,1033,1035,1037,1039,1041,1044,1046],{"class":90,"line":379},[88,1032,304],{"class":223},[88,1034,952],{"class":227},[88,1036,231],{"class":223},[88,1038,205],{"class":217},[88,1040,252],{"class":251},[88,1042,1043],{"class":255},"NAV",[88,1045,231],{"class":251},[88,1047,261],{"class":217},[88,1049,1050,1052,1054,1056,1058,1060,1063,1065],{"class":90,"line":399},[88,1051,304],{"class":223},[88,1053,972],{"class":227},[88,1055,231],{"class":223},[88,1057,205],{"class":217},[88,1059,252],{"class":251},[88,1061,1062],{"class":255},"toc doc-toc",[88,1064,231],{"class":251},[88,1066,261],{"class":217},[88,1068,1069,1071,1073,1075,1077,1079,1081,1083],{"class":90,"line":412},[88,1070,304],{"class":223},[88,1072,244],{"class":227},[88,1074,231],{"class":223},[88,1076,205],{"class":217},[88,1078,252],{"class":251},[88,1080,372],{"class":255},[88,1082,231],{"class":251},[88,1084,261],{"class":217},[88,1086,1087,1089,1091,1093,1095,1097,1099,1101],{"class":90,"line":428},[88,1088,304],{"class":223},[88,1090,307],{"class":227},[88,1092,231],{"class":223},[88,1094,205],{"class":217},[88,1096,252],{"class":251},[88,1098,392],{"class":255},[88,1100,231],{"class":251},[88,1102,261],{"class":217},[88,1104,1105,1107,1109,1111,1113,1115,1118,1120],{"class":90,"line":433},[88,1106,304],{"class":223},[88,1108,268],{"class":227},[88,1110,231],{"class":223},[88,1112,205],{"class":217},[88,1114,252],{"class":251},[88,1116,1117],{"class":255},"459.078px",[88,1119,231],{"class":251},[88,1121,261],{"class":217},[88,1123,1124,1126,1128,1130,1132],{"class":90,"line":439},[88,1125,304],{"class":223},[88,1127,293],{"class":227},[88,1129,231],{"class":223},[88,1131,205],{"class":217},[88,1133,236],{"class":217},[88,1135,1137,1140,1142,1144,1146,1149],{"class":90,"line":1136},18,[88,1138,1139],{"class":223},"        \"",[88,1141,307],{"class":227},[88,1143,231],{"class":223},[88,1145,205],{"class":217},[88,1147,1148],{"class":314}," 96.484375",[88,1150,1151],{"class":285},"  // 初期位置\n",[88,1153,1155],{"class":90,"line":1154},19,[88,1156,1157],{"class":217},"      }\n",[88,1159,1161],{"class":90,"line":1160},20,[88,1162,336],{"class":217},[88,1164,1166],{"class":90,"line":1165},21,[88,1167,1168],{"class":217},"  ]\n",[88,1170,1172],{"class":90,"line":1171},22,[88,1173,125],{"class":217},[17,1175,1176],{},"スクロール後（scrollY = 600）:",[79,1178,1180],{"className":208,"code":1179,"language":210,"meta":84,"style":84},"{\n  \"toc\": {\n    \"position\": \"sticky\",\n    \"top\": \"16px\",\n    \"rect\": {\n      \"top\": -503.515625  // 画面外に移動している\n    },\n    \"isStuck\": false\n  }\n}\n",[21,1181,1182,1186,1198,1216,1234,1246,1262,1266,1280,1284],{"__ignoreMap":84},[88,1183,1184],{"class":90,"line":91},[88,1185,218],{"class":217},[88,1187,1188,1190,1192,1194,1196],{"class":90,"line":98},[88,1189,224],{"class":223},[88,1191,350],{"class":227},[88,1193,231],{"class":223},[88,1195,205],{"class":217},[88,1197,236],{"class":217},[88,1199,1200,1202,1204,1206,1208,1210,1212,1214],{"class":90,"line":104},[88,1201,241],{"class":223},[88,1203,244],{"class":227},[88,1205,231],{"class":223},[88,1207,205],{"class":217},[88,1209,252],{"class":251},[88,1211,372],{"class":255},[88,1213,231],{"class":251},[88,1215,261],{"class":217},[88,1217,1218,1220,1222,1224,1226,1228,1230,1232],{"class":90,"line":110},[88,1219,241],{"class":223},[88,1221,307],{"class":227},[88,1223,231],{"class":223},[88,1225,205],{"class":217},[88,1227,252],{"class":251},[88,1229,392],{"class":255},[88,1231,231],{"class":251},[88,1233,261],{"class":217},[88,1235,1236,1238,1240,1242,1244],{"class":90,"line":116},[88,1237,241],{"class":223},[88,1239,293],{"class":227},[88,1241,231],{"class":223},[88,1243,205],{"class":217},[88,1245,236],{"class":217},[88,1247,1248,1250,1252,1254,1256,1259],{"class":90,"line":122},[88,1249,304],{"class":223},[88,1251,307],{"class":227},[88,1253,231],{"class":223},[88,1255,205],{"class":217},[88,1257,1258],{"class":314}," -503.515625",[88,1260,1261],{"class":285},"  // 画面外に移動している\n",[88,1263,1264],{"class":90,"line":176},[88,1265,1024],{"class":217},[88,1267,1268,1270,1273,1275,1277],{"class":90,"line":333},[88,1269,241],{"class":223},[88,1271,1272],{"class":227},"isStuck",[88,1274,231],{"class":223},[88,1276,205],{"class":217},[88,1278,1279],{"class":704}," false\n",[88,1281,1282],{"class":90,"line":339},[88,1283,436],{"class":217},[88,1285,1286],{"class":90,"line":345},[88,1287,125],{"class":217},[17,1289,1290,1293,1294,1296],{},[75,1291,1292],{},"問題点",": ",[21,1295,40],{},"が設定されているにもかかわらず、要素がスクロールと一緒に移動している",[26,1298,1300],{"id":1299},"_6-親要素のtransformプロパティ確認","6. 親要素のtransformプロパティ確認",[17,1302,1303,1305,1306,1309],{},[21,1304,40],{},"が機能しない一般的な原因として、親要素に",[21,1307,1308],{},"transform","プロパティが設定されている可能性を確認：",[79,1311,1313],{"className":208,"code":1312,"language":210,"meta":84,"style":84},"{\n  \"ancestors\": [\n    {\n      \"tag\": \"NAV\",\n      \"className\": \"toc doc-toc\",\n      \"transform\": \"none\",\n      \"filter\": \"none\",\n      \"perspective\": \"none\"\n    },\n    {\n      \"tag\": \"DIV\",\n      \"className\": \"doc-container\",\n      \"transform\": \"none\"\n    },\n    {\n      \"tag\": \"MAIN\",\n      \"transform\": \"none\"\n    }\n  ]\n}\n",[21,1314,1315,1319,1332,1336,1354,1372,1391,1410,1427,1431,1435,1454,1473,1489,1493,1497,1516,1532,1536,1540],{"__ignoreMap":84},[88,1316,1317],{"class":90,"line":91},[88,1318,218],{"class":217},[88,1320,1321,1323,1326,1328,1330],{"class":90,"line":98},[88,1322,224],{"class":223},[88,1324,1325],{"class":227},"ancestors",[88,1327,231],{"class":223},[88,1329,205],{"class":217},[88,1331,940],{"class":217},[88,1333,1334],{"class":90,"line":104},[88,1335,945],{"class":217},[88,1337,1338,1340,1342,1344,1346,1348,1350,1352],{"class":90,"line":110},[88,1339,304],{"class":223},[88,1341,952],{"class":227},[88,1343,231],{"class":223},[88,1345,205],{"class":217},[88,1347,252],{"class":251},[88,1349,1043],{"class":255},[88,1351,231],{"class":251},[88,1353,261],{"class":217},[88,1355,1356,1358,1360,1362,1364,1366,1368,1370],{"class":90,"line":116},[88,1357,304],{"class":223},[88,1359,972],{"class":227},[88,1361,231],{"class":223},[88,1363,205],{"class":217},[88,1365,252],{"class":251},[88,1367,1062],{"class":255},[88,1369,231],{"class":251},[88,1371,261],{"class":217},[88,1373,1374,1376,1378,1380,1382,1384,1387,1389],{"class":90,"line":122},[88,1375,304],{"class":223},[88,1377,1308],{"class":227},[88,1379,231],{"class":223},[88,1381,205],{"class":217},[88,1383,252],{"class":251},[88,1385,1386],{"class":255},"none",[88,1388,231],{"class":251},[88,1390,261],{"class":217},[88,1392,1393,1395,1398,1400,1402,1404,1406,1408],{"class":90,"line":176},[88,1394,304],{"class":223},[88,1396,1397],{"class":227},"filter",[88,1399,231],{"class":223},[88,1401,205],{"class":217},[88,1403,252],{"class":251},[88,1405,1386],{"class":255},[88,1407,231],{"class":251},[88,1409,261],{"class":217},[88,1411,1412,1414,1417,1419,1421,1423,1425],{"class":90,"line":333},[88,1413,304],{"class":223},[88,1415,1416],{"class":227},"perspective",[88,1418,231],{"class":223},[88,1420,205],{"class":217},[88,1422,252],{"class":251},[88,1424,1386],{"class":255},[88,1426,1019],{"class":251},[88,1428,1429],{"class":90,"line":339},[88,1430,1024],{"class":217},[88,1432,1433],{"class":90,"line":345},[88,1434,945],{"class":217},[88,1436,1437,1439,1441,1443,1445,1447,1450,1452],{"class":90,"line":359},[88,1438,304],{"class":223},[88,1440,952],{"class":227},[88,1442,231],{"class":223},[88,1444,205],{"class":217},[88,1446,252],{"class":251},[88,1448,1449],{"class":255},"DIV",[88,1451,231],{"class":251},[88,1453,261],{"class":217},[88,1455,1456,1458,1460,1462,1464,1466,1469,1471],{"class":90,"line":379},[88,1457,304],{"class":223},[88,1459,972],{"class":227},[88,1461,231],{"class":223},[88,1463,205],{"class":217},[88,1465,252],{"class":251},[88,1467,1468],{"class":255},"doc-container",[88,1470,231],{"class":251},[88,1472,261],{"class":217},[88,1474,1475,1477,1479,1481,1483,1485,1487],{"class":90,"line":399},[88,1476,304],{"class":223},[88,1478,1308],{"class":227},[88,1480,231],{"class":223},[88,1482,205],{"class":217},[88,1484,252],{"class":251},[88,1486,1386],{"class":255},[88,1488,1019],{"class":251},[88,1490,1491],{"class":90,"line":412},[88,1492,1024],{"class":217},[88,1494,1495],{"class":90,"line":428},[88,1496,945],{"class":217},[88,1498,1499,1501,1503,1505,1507,1509,1512,1514],{"class":90,"line":433},[88,1500,304],{"class":223},[88,1502,952],{"class":227},[88,1504,231],{"class":223},[88,1506,205],{"class":217},[88,1508,252],{"class":251},[88,1510,1511],{"class":255},"MAIN",[88,1513,231],{"class":251},[88,1515,261],{"class":217},[88,1517,1518,1520,1522,1524,1526,1528,1530],{"class":90,"line":439},[88,1519,304],{"class":223},[88,1521,1308],{"class":227},[88,1523,231],{"class":223},[88,1525,205],{"class":217},[88,1527,252],{"class":251},[88,1529,1386],{"class":255},[88,1531,1019],{"class":251},[88,1533,1534],{"class":90,"line":1136},[88,1535,336],{"class":217},[88,1537,1538],{"class":90,"line":1154},[88,1539,1168],{"class":217},[88,1541,1542],{"class":90,"line":1160},[88,1543,125],{"class":217},[17,1545,1546,1293,1548,1550],{},[75,1547,183],{},[21,1549,1308],{},"プロパティは設定されていない",[13,1552,1554],{"id":1553},"原因と解決策解決済み","原因と解決策（解決済み）",[26,1556,1558,1559,1562,1563],{"id":1557},"真の原因htmlタグへのoverflow-x-hidden","真の原因：",[21,1560,1561],{},"html","タグへの",[21,1564,1565],{},"overflow-x: hidden",[17,1567,1568,1569,1572],{},"調査の結果、",[21,1570,1571],{},"apps/web/app/app.vue","で設定されていた以下のグローバルスタイルが原因であることが判明しました。",[79,1574,1578],{"className":1575,"code":1576,"language":1577,"meta":84,"style":84},"language-css shiki shiki-themes vitesse-light vitesse-light","/* 修正前 */\nhtml, body {\n  overflow-x: hidden;\n  /* ... */\n}\n","css",[21,1579,1580,1585,1596,1610,1615],{"__ignoreMap":84},[88,1581,1582],{"class":90,"line":91},[88,1583,1584],{"class":285},"/* 修正前 */\n",[88,1586,1587,1589,1591,1594],{"class":90,"line":98},[88,1588,1561],{"class":704},[88,1590,282],{"class":217},[88,1592,1593],{"class":704}," body",[88,1595,236],{"class":217},[88,1597,1598,1601,1603,1607],{"class":90,"line":104},[88,1599,1600],{"class":227},"  overflow-x",[88,1602,205],{"class":217},[88,1604,1606],{"class":1605},"snbK4"," hidden",[88,1608,1609],{"class":217},";\n",[88,1611,1612],{"class":90,"line":110},[88,1613,1614],{"class":285},"  /* ... */\n",[88,1616,1617],{"class":90,"line":116},[88,1618,125],{"class":217},[17,1620,1621,1623,1624,1627,1628,1631,1632,1635,1636,1635,1639,1642],{},[21,1622,40],{},"は、親要素（または祖先要素）のいずれかに",[21,1625,1626],{},"overflow","プロパティ（",[21,1629,1630],{},"visible","以外、特に",[21,1633,1634],{},"hidden",", ",[21,1637,1638],{},"scroll",[21,1640,1641],{},"auto","）が設定されている場合、その要素がスクロールコンテナとして振る舞ってしまい、期待通りにウィンドウのスクロールに追従しなくなる（スティッキーコンテキストが閉じ込められる）という仕様があります。",[17,1644,1645,1646,1648,1649,1657],{},"今回の場合、",[21,1647,772],{},"だけでなく",[75,1650,1651,1653,1654,1656],{},[21,1652,1561],{},"タグにも",[21,1655,1565],{},"が適用されていた","ため、ルート要素レベルでスクロールの挙動に影響を与え、stickyが機能しなくなっていました。",[26,1659,1660],{"id":1660},"実施した修正",[17,1662,1663,1665,1666,134,1668,1670,1671,1673],{},[21,1664,1571],{},"を修正し、",[21,1667,1565],{},[21,1669,1561],{},"タグから削除し、",[21,1672,772],{},"タグのみに適用するように変更しました。",[79,1675,1677],{"className":1575,"code":1676,"language":1577,"meta":84,"style":84},"/* 修正後 */\nhtml {\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  overflow-x: hidden; /* bodyのみに残す */\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n}\n",[21,1678,1679,1684,1690,1706,1718,1729,1733,1737,1743,1757,1769,1779,1789],{"__ignoreMap":84},[88,1680,1681],{"class":90,"line":91},[88,1682,1683],{"class":285},"/* 修正後 */\n",[88,1685,1686,1688],{"class":90,"line":98},[88,1687,1561],{"class":704},[88,1689,236],{"class":217},[88,1691,1692,1695,1697,1700,1704],{"class":90,"line":104},[88,1693,1694],{"class":227},"  max-width",[88,1696,205],{"class":217},[88,1698,1699],{"class":314}," 100",[88,1701,1703],{"class":1702},"stQ0i","%",[88,1705,1609],{"class":217},[88,1707,1708,1711,1713,1716],{"class":90,"line":110},[88,1709,1710],{"class":227},"  margin",[88,1712,205],{"class":217},[88,1714,1715],{"class":314}," 0",[88,1717,1609],{"class":217},[88,1719,1720,1723,1725,1727],{"class":90,"line":116},[88,1721,1722],{"class":227},"  padding",[88,1724,205],{"class":217},[88,1726,1715],{"class":314},[88,1728,1609],{"class":217},[88,1730,1731],{"class":90,"line":122},[88,1732,125],{"class":217},[88,1734,1735],{"class":90,"line":176},[88,1736,650],{"emptyLinePlaceholder":649},[88,1738,1739,1741],{"class":90,"line":333},[88,1740,772],{"class":704},[88,1742,236],{"class":217},[88,1744,1745,1747,1749,1751,1754],{"class":90,"line":339},[88,1746,1600],{"class":227},[88,1748,205],{"class":217},[88,1750,1606],{"class":1605},[88,1752,1753],{"class":217},";",[88,1755,1756],{"class":285}," /* bodyのみに残す */\n",[88,1758,1759,1761,1763,1765,1767],{"class":90,"line":345},[88,1760,1694],{"class":227},[88,1762,205],{"class":217},[88,1764,1699],{"class":314},[88,1766,1703],{"class":1702},[88,1768,1609],{"class":217},[88,1770,1771,1773,1775,1777],{"class":90,"line":359},[88,1772,1710],{"class":227},[88,1774,205],{"class":217},[88,1776,1715],{"class":314},[88,1778,1609],{"class":217},[88,1780,1781,1783,1785,1787],{"class":90,"line":379},[88,1782,1722],{"class":227},[88,1784,205],{"class":217},[88,1786,1715],{"class":314},[88,1788,1609],{"class":217},[88,1790,1791],{"class":90,"line":399},[88,1792,125],{"class":217},[17,1794,1795,1796,1798,1799,1801],{},"これにより、横スクロールの防止（",[21,1797,772],{},"での制御）を維持しつつ、",[21,1800,1561],{},"要素がstickyの動作を阻害しないようになり、目次が正しく固定表示されるようになりました。",[13,1803,1805],{"id":1804},"追加機能目次の自動スクロール","追加機能：目次の自動スクロール",[26,1807,1808],{"id":1808},"課題",[17,1810,1811],{},"position: stickyの問題を解決した後、目次が固定表示されるようになったものの、ページをスクロールして下部のセクションに到達した際に、目次の表示領域内で現在のアクティブな項目が視界に入らない（目次自体のスクロールが自動で追従しない）という問題が確認されました。",[17,1813,1814],{},"例えば、ユーザーがページの最下部（「まとめ」セクション）までスクロールした場合でも、目次は上部のセクション（例：「問題の症状」など）が表示されたままになっており、現在読んでいるセクションがハイライトされていても、それが目次の表示領域外にあり見えないという状態でした。",[26,1816,1817],{"id":1817},"解決策",[17,1819,1820,1823,1824,1827],{},[21,1821,1822],{},"apps/web/app/components/TableOfContents.vue","に、",[21,1825,1826],{},"activeId","（現在アクティブなセクションID）が変更されたときに、目次コンテナ内で該当するリンクが見える位置まで自動的にスクロールする機能を実装しました。",[127,1829,1830],{"id":1830},"実装内容",[1832,1833,1834],"ol",{},[33,1835,1836,1839,1840,1843],{},[75,1837,1838],{},"ref の追加",": 目次の ",[21,1841,1842],{},"\u003Cnav>"," 要素への参照を追加",[79,1845,1849],{"className":1846,"code":1847,"language":1848,"meta":84,"style":84},"language-typescript shiki shiki-themes vitesse-light vitesse-light","const tocNav = ref\u003CHTMLElement | null>(null)\n","typescript",[21,1850,1851],{"__ignoreMap":84},[88,1852,1853,1856,1859,1862,1865,1867,1871,1874,1877,1880,1883],{"class":90,"line":91},[88,1854,1855],{"class":1702},"const ",[88,1857,1858],{"class":708},"tocNav",[88,1860,1861],{"class":217}," =",[88,1863,1864],{"class":758}," ref",[88,1866,701],{"class":217},[88,1868,1870],{"class":1869},"sSkh3","HTMLElement",[88,1872,1873],{"class":217}," |",[88,1875,1876],{"class":1702}," null",[88,1878,1879],{"class":217},">(",[88,1881,1882],{"class":1702},"null",[88,1884,1885],{"class":217},")\n",[79,1887,1890],{"className":1888,"code":1889,"language":1561,"meta":84,"style":84},"language-html shiki shiki-themes vitesse-light vitesse-light","\u003Cnav v-if=\"flatLinks.length > 0\" ref=\"tocNav\" class=\"toc\" aria-label=\"目次\">\n",[21,1891,1892],{"__ignoreMap":84},[88,1893,1894,1896,1899,1902,1904,1906,1909,1911,1913,1915,1917,1919,1921,1923,1925,1927,1929,1931,1934,1936,1938,1941,1943],{"class":90,"line":91},[88,1895,701],{"class":217},[88,1897,1898],{"class":704},"nav",[88,1900,1901],{"class":708}," v-if",[88,1903,712],{"class":217},[88,1905,231],{"class":251},[88,1907,1908],{"class":255},"flatLinks.length > 0",[88,1910,231],{"class":251},[88,1912,1864],{"class":708},[88,1914,712],{"class":217},[88,1916,231],{"class":251},[88,1918,1858],{"class":255},[88,1920,231],{"class":251},[88,1922,709],{"class":708},[88,1924,712],{"class":217},[88,1926,231],{"class":251},[88,1928,350],{"class":255},[88,1930,231],{"class":251},[88,1932,1933],{"class":708}," aria-label",[88,1935,712],{"class":217},[88,1937,231],{"class":251},[88,1939,1940],{"class":255},"目次",[88,1942,231],{"class":251},[88,1944,722],{"class":217},[1832,1946,1947],{"start":98},[33,1948,1949,1293,1952,1954],{},[75,1950,1951],{},"watch による自動スクロール",[21,1953,1826],{}," の変更を監視し、アクティブなリンクを目次の表示領域内に自動スクロール",[79,1956,1958],{"className":1846,"code":1957,"language":1848,"meta":84,"style":84},"// アクティブな見出しが変わったときにTOCをスクロール\nwatch(activeId, async (newId) => {\n  if (!newId || !tocNav.value) return\n\n  await nextTick()\n  const activeLink = tocNav.value.querySelector\u003CHTMLElement>(`.toc__link[href=\"#${newId}\"]`)\n  if (activeLink) {\n    // scrollIntoViewだと親コンテナ（ウィンドウ全体）もスクロールしてしまう可能性があるため、\n    // TOCコンテナ内のスクロール位置を手動で計算して制御する\n\n    const container = tocNav.value\n    const linkRect = activeLink.getBoundingClientRect()\n    const containerRect = container.getBoundingClientRect()\n\n    // リンクがコンテナの表示領域外にある、または端に近い場合にスクロール\n    const offset = 20 // 余白\n    const isAbove = linkRect.top \u003C containerRect.top + offset\n    const isBelow = linkRect.bottom > containerRect.bottom - offset\n\n    if (isAbove || isBelow) {\n      // 中央に表示されるようにスクロール位置を調整\n      const scrollTop = container.scrollTop + (linkRect.top - containerRect.top) - (containerRect.height / 2) + (linkRect.height / 2)\n      container.scrollTo({\n        top: scrollTop,\n        behavior: 'smooth'\n      })\n    }\n  }\n})\n",[21,1959,1960,1965,1994,2024,2028,2039,2088,2100,2105,2110,2114,2131,2150,2168,2172,2177,2192,2224,2254,2258,2276,2281,2351,2365,2377,2394,2400,2405,2410],{"__ignoreMap":84},[88,1961,1962],{"class":90,"line":91},[88,1963,1964],{"class":285},"// アクティブな見出しが変わったときにTOCをスクロール\n",[88,1966,1967,1970,1973,1975,1977,1980,1983,1986,1989,1992],{"class":90,"line":98},[88,1968,1969],{"class":758},"watch",[88,1971,1972],{"class":217},"(",[88,1974,1826],{"class":708},[88,1976,282],{"class":217},[88,1978,1979],{"class":1702}," async",[88,1981,1982],{"class":217}," (",[88,1984,1985],{"class":708},"newId",[88,1987,1988],{"class":217},")",[88,1990,1991],{"class":217}," =>",[88,1993,236],{"class":217},[88,1995,1996,1999,2001,2004,2006,2009,2012,2014,2016,2019,2021],{"class":90,"line":104},[88,1997,1998],{"class":704},"  if",[88,2000,1982],{"class":217},[88,2002,2003],{"class":1702},"!",[88,2005,1985],{"class":708},[88,2007,2008],{"class":1702}," ||",[88,2010,2011],{"class":1702}," !",[88,2013,1858],{"class":708},[88,2015,769],{"class":217},[88,2017,2018],{"class":708},"value",[88,2020,1988],{"class":217},[88,2022,2023],{"class":704}," return\n",[88,2025,2026],{"class":90,"line":110},[88,2027,650],{"emptyLinePlaceholder":649},[88,2029,2030,2033,2036],{"class":90,"line":116},[88,2031,2032],{"class":704},"  await",[88,2034,2035],{"class":758}," nextTick",[88,2037,2038],{"class":217},"()\n",[88,2040,2041,2044,2047,2049,2052,2054,2056,2058,2061,2063,2065,2067,2070,2073,2076,2078,2081,2084,2086],{"class":90,"line":122},[88,2042,2043],{"class":1702},"  const ",[88,2045,2046],{"class":708},"activeLink",[88,2048,1861],{"class":217},[88,2050,2051],{"class":708}," tocNav",[88,2053,769],{"class":217},[88,2055,2018],{"class":708},[88,2057,769],{"class":217},[88,2059,2060],{"class":758},"querySelector",[88,2062,701],{"class":217},[88,2064,1870],{"class":1869},[88,2066,1879],{"class":217},[88,2068,2069],{"class":251},"`",[88,2071,2072],{"class":255},".toc__link[href=\"#",[88,2074,2075],{"class":704},"${",[88,2077,1985],{"class":255},[88,2079,2080],{"class":704},"}",[88,2082,2083],{"class":255},"\"]",[88,2085,2069],{"class":251},[88,2087,1885],{"class":217},[88,2089,2090,2092,2094,2096,2098],{"class":90,"line":176},[88,2091,1998],{"class":704},[88,2093,1982],{"class":217},[88,2095,2046],{"class":708},[88,2097,1988],{"class":217},[88,2099,236],{"class":217},[88,2101,2102],{"class":90,"line":333},[88,2103,2104],{"class":285},"    // scrollIntoViewだと親コンテナ（ウィンドウ全体）もスクロールしてしまう可能性があるため、\n",[88,2106,2107],{"class":90,"line":339},[88,2108,2109],{"class":285},"    // TOCコンテナ内のスクロール位置を手動で計算して制御する\n",[88,2111,2112],{"class":90,"line":345},[88,2113,650],{"emptyLinePlaceholder":649},[88,2115,2116,2119,2122,2124,2126,2128],{"class":90,"line":359},[88,2117,2118],{"class":1702},"    const ",[88,2120,2121],{"class":708},"container",[88,2123,1861],{"class":217},[88,2125,2051],{"class":708},[88,2127,769],{"class":217},[88,2129,2130],{"class":708},"value\n",[88,2132,2133,2135,2138,2140,2143,2145,2148],{"class":90,"line":379},[88,2134,2118],{"class":1702},[88,2136,2137],{"class":708},"linkRect",[88,2139,1861],{"class":217},[88,2141,2142],{"class":708}," activeLink",[88,2144,769],{"class":217},[88,2146,2147],{"class":758},"getBoundingClientRect",[88,2149,2038],{"class":217},[88,2151,2152,2154,2157,2159,2162,2164,2166],{"class":90,"line":399},[88,2153,2118],{"class":1702},[88,2155,2156],{"class":708},"containerRect",[88,2158,1861],{"class":217},[88,2160,2161],{"class":708}," container",[88,2163,769],{"class":217},[88,2165,2147],{"class":758},[88,2167,2038],{"class":217},[88,2169,2170],{"class":90,"line":412},[88,2171,650],{"emptyLinePlaceholder":649},[88,2173,2174],{"class":90,"line":428},[88,2175,2176],{"class":285},"    // リンクがコンテナの表示領域外にある、または端に近い場合にスクロール\n",[88,2178,2179,2181,2184,2186,2189],{"class":90,"line":433},[88,2180,2118],{"class":1702},[88,2182,2183],{"class":708},"offset",[88,2185,1861],{"class":217},[88,2187,2188],{"class":314}," 20",[88,2190,2191],{"class":285}," // 余白\n",[88,2193,2194,2196,2199,2201,2204,2206,2208,2211,2214,2216,2218,2221],{"class":90,"line":439},[88,2195,2118],{"class":1702},[88,2197,2198],{"class":708},"isAbove",[88,2200,1861],{"class":217},[88,2202,2203],{"class":708}," linkRect",[88,2205,769],{"class":217},[88,2207,307],{"class":708},[88,2209,2210],{"class":217}," \u003C",[88,2212,2213],{"class":708}," containerRect",[88,2215,769],{"class":217},[88,2217,307],{"class":708},[88,2219,2220],{"class":1702}," + ",[88,2222,2223],{"class":708},"offset\n",[88,2225,2226,2228,2231,2233,2235,2237,2240,2243,2245,2247,2249,2252],{"class":90,"line":1136},[88,2227,2118],{"class":1702},[88,2229,2230],{"class":708},"isBelow",[88,2232,1861],{"class":217},[88,2234,2203],{"class":708},[88,2236,769],{"class":217},[88,2238,2239],{"class":708},"bottom",[88,2241,2242],{"class":217}," >",[88,2244,2213],{"class":708},[88,2246,769],{"class":217},[88,2248,2239],{"class":708},[88,2250,2251],{"class":1702}," - ",[88,2253,2223],{"class":708},[88,2255,2256],{"class":90,"line":1154},[88,2257,650],{"emptyLinePlaceholder":649},[88,2259,2260,2263,2265,2267,2269,2272,2274],{"class":90,"line":1160},[88,2261,2262],{"class":704},"    if",[88,2264,1982],{"class":217},[88,2266,2198],{"class":708},[88,2268,2008],{"class":1702},[88,2270,2271],{"class":708}," isBelow",[88,2273,1988],{"class":217},[88,2275,236],{"class":217},[88,2277,2278],{"class":90,"line":1165},[88,2279,2280],{"class":285},"      // 中央に表示されるようにスクロール位置を調整\n",[88,2282,2283,2286,2289,2291,2293,2295,2297,2299,2301,2303,2305,2307,2309,2311,2313,2315,2317,2319,2321,2323,2325,2327,2330,2333,2335,2337,2339,2341,2343,2345,2347,2349],{"class":90,"line":1171},[88,2284,2285],{"class":1702},"      const ",[88,2287,2288],{"class":708},"scrollTop",[88,2290,1861],{"class":217},[88,2292,2161],{"class":708},[88,2294,769],{"class":217},[88,2296,2288],{"class":708},[88,2298,2220],{"class":1702},[88,2300,1972],{"class":217},[88,2302,2137],{"class":708},[88,2304,769],{"class":217},[88,2306,307],{"class":708},[88,2308,2251],{"class":1702},[88,2310,2156],{"class":708},[88,2312,769],{"class":217},[88,2314,307],{"class":708},[88,2316,1988],{"class":217},[88,2318,2251],{"class":1702},[88,2320,1972],{"class":217},[88,2322,2156],{"class":708},[88,2324,769],{"class":217},[88,2326,268],{"class":708},[88,2328,2329],{"class":1702}," / ",[88,2331,2332],{"class":314},"2",[88,2334,1988],{"class":217},[88,2336,2220],{"class":1702},[88,2338,1972],{"class":217},[88,2340,2137],{"class":708},[88,2342,769],{"class":217},[88,2344,268],{"class":708},[88,2346,2329],{"class":1702},[88,2348,2332],{"class":314},[88,2350,1885],{"class":217},[88,2352,2354,2357,2359,2362],{"class":90,"line":2353},23,[88,2355,2356],{"class":708},"      container",[88,2358,769],{"class":217},[88,2360,2361],{"class":758},"scrollTo",[88,2363,2364],{"class":217},"({\n",[88,2366,2368,2371,2373,2375],{"class":90,"line":2367},24,[88,2369,2370],{"class":227},"        top",[88,2372,1293],{"class":217},[88,2374,2288],{"class":708},[88,2376,261],{"class":217},[88,2378,2380,2383,2385,2388,2391],{"class":90,"line":2379},25,[88,2381,2382],{"class":227},"        behavior",[88,2384,1293],{"class":217},[88,2386,2387],{"class":251},"'",[88,2389,2390],{"class":255},"smooth",[88,2392,2393],{"class":251},"'\n",[88,2395,2397],{"class":90,"line":2396},26,[88,2398,2399],{"class":217},"      })\n",[88,2401,2403],{"class":90,"line":2402},27,[88,2404,336],{"class":217},[88,2406,2408],{"class":90,"line":2407},28,[88,2409,436],{"class":217},[88,2411,2413],{"class":90,"line":2412},29,[88,2414,2415],{"class":217},"})\n",[127,2417,2418],{"id":2418},"実装のポイント",[30,2420,2421,2436,2442],{},[33,2422,2423,1293,2429,2432,2433,2435],{},[75,2424,2425,2428],{},[21,2426,2427],{},"scrollIntoView"," を使わない理由",[21,2430,2431],{},"Element.scrollIntoView()"," を使用すると、目次コンテナだけでなく、ページ全体（window）もスクロールしてしまう可能性があるため、目次コンテナ内のスクロールのみを制御するために手動で ",[21,2434,2361],{}," を使用",[33,2437,2438,2441],{},[75,2439,2440],{},"中央配置",": アクティブなリンクが目次コンテナの中央付近に表示されるように計算",[33,2443,2444,1293,2447,2450],{},[75,2445,2446],{},"スムーズスクロール",[21,2448,2449],{},"behavior: 'smooth'"," を指定することで、スクロール時のアニメーションを実現",[26,2452,183],{"id":183},[17,2454,2455],{},"この実装により、ユーザーがページをスクロールすると、目次も自動的にスクロールし、現在読んでいるセクションに対応するリンクが常に目次の表示領域内に保たれるようになりました。",[13,2457,2458],{"id":2458},"関連ファイル",[30,2460,2461,2467,2472],{},[33,2462,2463,2466],{},[21,2464,2465],{},"apps/web/app/components/DocPage.vue"," - ドキュメントページのレイアウト",[33,2468,2469,2471],{},[21,2470,1822],{}," - 目次コンポーネント",[33,2473,2474,2477],{},[21,2475,2476],{},"apps/web/app/pages/[...slug].vue"," - 動的ルートページ",[13,2479,2480],{"id":2480},"参考情報",[30,2482,2483,2492],{},[33,2484,2485],{},[2486,2487,2491],"a",{"href":2488,"rel":2489},"https://developer.mozilla.org/ja/docs/Web/CSS/position",[2490],"nofollow","CSS position: sticky の仕様",[33,2493,2494],{},[2486,2495,2498],{"href":2496,"rel":2497},"https://css-tricks.com/position-sticky-and-table-headers/",[2490],"CSS Grid Layout と position: sticky",[2500,2501,2502],"style",{},"html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sqvqQ, html code.shiki .sqvqQ{--shiki-default:#99841877;--shiki-dark:#99841877}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}",{"title":84,"searchDepth":98,"depth":98,"links":2504},[2505,2509,2518,2523,2528,2529],{"id":15,"depth":98,"text":15,"children":2506},[2507,2508],{"id":28,"depth":104,"text":28},{"id":44,"depth":104,"text":44},{"id":60,"depth":98,"text":60,"children":2510},[2511,2512,2513,2515,2516,2517],{"id":63,"depth":104,"text":64},{"id":187,"depth":104,"text":188},{"id":485,"depth":104,"text":2514},"3. グリッドコンテナのalign-items設定",{"id":675,"depth":104,"text":676},{"id":873,"depth":104,"text":874},{"id":1299,"depth":104,"text":1300},{"id":1553,"depth":98,"text":1554,"children":2519},[2520,2522],{"id":1557,"depth":104,"text":2521},"真の原因：htmlタグへのoverflow-x: hidden",{"id":1660,"depth":104,"text":1660},{"id":1804,"depth":98,"text":1805,"children":2524},[2525,2526,2527],{"id":1808,"depth":104,"text":1808},{"id":1817,"depth":104,"text":1817},{"id":183,"depth":104,"text":183},{"id":2458,"depth":98,"text":2458},{"id":2480,"depth":98,"text":2480},null,"position: stickyが機能せず、目次がスクロールで消える問題の調査と修正","md",{},"/table-of-contents-sticky-issue",false,"2025-11-27T00:00:00.000Z",{"title":5,"description":2531},"2025-11/2025-11-27/table-of-contents-sticky-issue",[2540,2541,2542,2543,2544],"CSS","position sticky","Nuxt","Vue","デバッグ","VB8R_JjP6NEsJKs7ecESm_FdTBeK0eP_eJBe_pUwv_E",[],[2548,2552,2555,2559,2563],{"title":2549,"path":2550,"publishedAt":2551},"2026年5月26日の開発日記 - 非表示スクローラーのバグ退治とAmazon画像のかき集め","/2026-05-26-diary","2026-05-26T00:00:00.000Z",{"title":2553,"path":2554,"publishedAt":2551},"章を切り替えてもスクロールが先頭に戻らないバグ：表示中のスクローラーを掴み損ねていた真因を突き止めるまで","/cashflow-lesson-scroll-reset-fix",{"title":2556,"path":2557,"publishedAt":2558},"連結精算表のUI改善とデータバグ修正 - 矢印線・多列テーブル・貸借バランス","/consolidated-worksheet-ui-data-fixes-2026-02-02","2026-02-02T00:00:00.000Z",{"title":2560,"path":2561,"publishedAt":2562},"月の満ち欠けシミュレーター機能強化 - Tailwind CSS変換からSEO対応まで","/moon-simulator-enhancement","2026-01-26T00:00:00.000Z",{"title":2564,"path":2565,"publishedAt":2566},"2026年1月17日の開発日記 - 人生計画シミュレーターUI実装","/2026-01-17-diary","2026-01-17T00:00:00.000Z","https://log.eurekapu.com/og/blog/table-of-contents-sticky-issue.png?v=2025-11-27T00%3A00%3A00.000Z&title=%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%80%E3%82%A6%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E7%9B%AE%E6%AC%A1%E3%81%8C%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E6%99%82%E3%81%AB%E5%9B%BA%E5%AE%9A%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C&author=Kei%20Komatsu&sig=3c5f5fa37556f5be",1785654665479]