fix(posimai-sc): 3ステップ後の理解度ジャンプでフォーカス起因のズレを抑止

Made-with: Cursor
This commit is contained in:
posimai 2026-04-20 20:02:27 +09:00
parent 44c4ffe3c2
commit 220c7c2449
2 changed files with 8 additions and 1 deletions

View File

@ -913,7 +913,7 @@ header{display:flex;align-items:center;justify-content:space-between;padding:0 1
</div>
<!-- Quiz -->
<div id="comprehension-quiz" class="card" x-show="currentUnit?.quiz?.length && (!stepMode || stepStep === 3)">
<div id="comprehension-quiz" class="card" tabindex="-1" x-show="currentUnit?.quiz?.length && (!stepMode || stepStep === 3)">
<div class="quiz-header">
<div class="quiz-title-label">
<i data-lucide="check-circle-2" style="width:13px;height:13px"></i>

View File

@ -824,6 +824,9 @@ document.addEventListener('alpine:init', () => {
this.$nextTick(()=>{ if(window.lucide) lucide.createIcons(); });
},
finishStepMode(){
if(document.activeElement && typeof document.activeElement.blur === 'function'){
document.activeElement.blur();
}
this.stepMode=false;
this.$nextTick(()=>{
if(window.lucide) lucide.createIcons();
@ -833,6 +836,9 @@ document.addEventListener('alpine:init', () => {
});
},
scrollToComprehension(){
if(document.activeElement && typeof document.activeElement.blur === 'function'){
document.activeElement.blur();
}
this.$nextTick(()=>{
requestAnimationFrame(()=>{
requestAnimationFrame(()=>{ this.scrollMainToComprehension(); });
@ -844,6 +850,7 @@ document.addEventListener('alpine:init', () => {
const m=document.getElementById('main');
const el=document.getElementById('comprehension-quiz');
if(!m||!el) return;
try{ el.focus({ preventScroll:true }); }catch(e){}
// main内の実座標で算出して、カード先頭へ安定して合わせる
const offset=8;
const top=(el.getBoundingClientRect().top - m.getBoundingClientRect().top) + m.scrollTop - offset;