在 Bootstrap 5 中滾動到活動手風琴的頂部，沒有 jQuery

Question

關於“ Bootstrap 手風琴，單擊時滾動到活動（打開）手風琴頂部？ ”中的問題

我需要提供的代碼來滾動到活動手風琴項目的開頭，但是是為 Bootstrap 5.0 編寫的，沒有 jQuery。上面主題中的香草 JS 不適用於 Bootstrap 5 手風琴。

我修改了代碼如下，現在它在桌面瀏覽器上工作，但在移動 Android 瀏覽器上沒有任何反應：

const accordionItems = document.querySelectorAll('.accordion-collapse')
const acc = document.querySelector('#accordionBoost')

accordionItems.forEach((el)=>{
    el.addEventListener('shown.bs.collapse',(e)=>{
        let scrollOffset = acc.scrollTop + el.parentNode.offsetTop - 74
        window.scrollTo({
            top: scrollOffset,
            left: 0,
            behavior: 'smooth'
        })
    })
})

（-74px 用於我的粘性標題）

看看我上面的代碼，為什么它可以在桌面上運行，但不能在移動設備上運行？ 您在元素本身上帶有滾動事件的代碼根本無法正常工作，控制台中沒有錯誤，什么也沒有

編輯：一個手風琴項目的 html，其他項目遵循相同的標准：

<div class="accordion" id="accordionBoost">
  <!----------------------- CSREK Boost с точки --------------------------->
  <div class="accordion-item">
    <h2 class="accordion-header" id="boostcsrekPoints">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelboostcsrekPoints" aria-expanded="false" aria-controls="panelboostcsrekPoints">
        <i class="bi bi-cash-coin"></i>&nbsp; CSREK Boost с точки
      </button>
    </h2>
    <div id="panelboostcsrekPoints" class="accordion-collapse collapse" data-bs-parent="#accordionBoost" aria-labelledby="boostcsrekPoints">
      <div class="accordion-body">
        <p>Имате <b>1532</b> точки. Можете да използвате <b>3т</b>, за да boost-нете сървър за 3 ден(а).</p>
        <div class="mb-3 row">
          <label for="csrekpointsserver" class="col-sm-2 col-form-label">сървър:</label>
          <div class="col-sm-10">
            <p class="form-control-plaintext text-break fw-bold field_server_name" id="csrekpointsserver"><span class="text-danger">не сте посочили сървър за буустване</span></p>
          </div>
        </div>
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" value="yes" name="pay_points" id="pay_points_csrek" />
          <label class="form-check-label" for="pay_points_csrek">Да, ще използвам 3 точки за boost</label>
        </div>
        <input type="submit" name="boost_csrek" value="Boost с точки" id="boostCsrekPointsSubmitBtn" disabled class="btn btn-primary" />
      </div>
    </div>
  </div>
</div>

Answer 1

這應該對你有用。 我在底部添加了 lorem ipsum 文本，這樣就可以滾動頁面並查看它的實際效果。

 const accordionItems = document.querySelectorAll('.accordion-collapse') accordionItems.forEach((el)=>{ el.addEventListener('shown.bs.collapse',(e)=>{ let accordionItem = el.closest('.accordion-item'); window.scrollTo({ top: accordionItem.offsetTop - 74, left: 0, behavior: 'smooth' }); }) })

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="accordion" id="accordionBoost"> <div class="accordion-item"> <h2 class="accordion-header" id="boostcsrekPoints"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelboostcsrekPoints" aria-expanded="false" aria-controls="panelboostcsrekPoints"> <i class="bi bi-cash-coin"></i>&nbsp; CSREK Boost с точки </button> </h2> <div id="panelboostcsrekPoints" class="accordion-collapse collapse" data-bs-parent="#accordionBoost" aria-labelledby="boostcsrekPoints"> <div class="accordion-body"> <p>Имате <b>1532</b> точки. Можете да използвате <b>3т</b>, за да boost-нете сървър за 3 ден(а).</p> <div class="mb-3 row"> <label for="csrekpointsserver" class="col-sm-2 col-form-label">сървър:</label> <div class="col-sm-10"> <p class="form-control-plaintext text-break fw-bold field_server_name" id="csrekpointsserver"><span class="text-danger">не сте посочили сървър за буустване</span></p> </div> </div> <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" value="yes" name="pay_points" id="pay_points_csrek" /> <label class="form-check-label" for="pay_points_csrek">Да, ще използвам 3 точки за boost</label> </div> <input type="submit" name="boost_csrek" value="Boost с точки" id="boostCsrekPointsSubmitBtn" disabled class="btn btn-primary" /> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="boostcsrekPointsTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelboostcsrekPointsTwo" aria-expanded="false" aria-controls="panelboostcsrekPointsTwo"> <i class="bi bi-cash-coin"></i>&nbsp; CSREK Boost с точки </button> </h2> <div id="panelboostcsrekPointsTwo" class="accordion-collapse collapse" data-bs-parent="#accordionBoost" aria-labelledby="boostcsrekPointsTwo"> <div class="accordion-body"> <p>Имате <b>1532</b> точки. Можете да използвате <b>3т</b>, за да boost-нете сървър за 3 ден(а).</p> <div class="mb-3 row"> <label for="csrekpointsserver" class="col-sm-2 col-form-label">сървър:</label> <div class="col-sm-10"> <p class="form-control-plaintext text-break fw-bold field_server_name" id="csrekpointsserver"><span class="text-danger">не сте посочили сървър за буустване</span></p> </div> </div> <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" value="yes" name="pay_points" id="pay_points_csrek" /> <label class="form-check-label" for="pay_points_csrek">Да, ще използвам 3 точки за boost</label> </div> <input type="submit" name="boost_csrek" value="Boost с точки" id="boostCsrekPointsSubmitBtn" disabled class="btn btn-primary" /> </div> </div> </div> </div> <p class="p-5 bg-secondary text-white"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus feugiat dictum. Sed ac facilisis nunc. Vestibulum et iaculis turpis. Proin fringilla metus nisl, a pulvinar nulla dignissim nec. Vestibulum id volutpat purus. Etiam malesuada pellentesque purus vitae bibendum. Sed auctor commodo libero, faucibus bibendum erat venenatis in. Sed pulvinar diam at erat aliquam bibendum. Sed vitae iaculis tortor. In hac habitasse platea dictumst. Etiam tempus pellentesque metus dictum sodales. Donec id dapibus felis. Etiam nec risus purus. Cras vel ipsum nec tortor mollis aliquam. Integer dictum, urna id condimentum consequat, ante nibh feugiat orci, in euismod turpis nulla eu turpis. Phasellus tincidunt nulla in arcu interdum fringilla. Sed semper leo nisl. Nunc quis blandit risus, at vehicula purus. Proin dolor lectus, faucibus eget vestibulum nec, tristique nec lacus. Nullam mollis lectus quis justo eleifend, vel sagittis libero luctus. Nam nec nibh sed felis aliquam ultrices eu sit amet sapien. In aliquet ullamcorper dolor, facilisis luctus sapien sagittis nec. In pretium ligula a lorem semper, ut lobortis ipsum imperdiet. Donec non dui a metus euismod faucibus. Quisque accumsan scelerisque velit in varius. Donec eu porta ante, nec efficitur sapien. Donec molestie nisi eget ligula eleifend mollis. Fusce gravida efficitur odio at maximus. Aenean ac lacinia nisi. Donec gravida dignissim odio, nec interdum risus vulputate sed. Vivamus pretium fermentum mauris, non dictum urna bibendum quis. Proin consequat, sem lacinia molestie ultrices, massa eros sagittis enim, in consequat ante risus vel ipsum. Morbi commodo porta condimentum. Aliquam turpis libero, feugiat sed feugiat nec, faucibus vel velit. Quisque et quam lorem. Etiam pulvinar vitae diam eget efficitur. Sed et quam congue nibh semper iaculis. Sed a justo mauris. Vestibulum venenatis vulputate efficitur. Vestibulum convallis tincidunt nisl, a pharetra massa facilisis eu. Quisque ante elit, tempus accumsan eros laoreet, volutpat porta dui. Suspendisse potenti. Donec feugiat cursus iaculis. Curabitur sodales diam et arcu suscipit sollicitudin. Nullam laoreet odio nec dolor vehicula accumsan. Donec id dolor sit amet ipsum elementum fermentum eu vitae lacus. Vestibulum consectetur scelerisque tristique. Quisque a placerat odio, ut luctus ligula. Mauris imperdiet quam ac dui vulputate efficitur. Nulla non quam dignissim, semper est accumsan, rutrum magna. Nunc pulvinar mauris consequat, vehicula elit ut, dictum justo. Nam non neque ullamcorper, eleifend risus et, finibus turpis. Nullam quis condimentum felis. Nullam elementum dolor sed ante posuere venenatis. Vestibulum lacus arcu, bibendum eget consectetur imperdiet, venenatis quis nisl. Cras vel velit sit amet neque convallis pharetra. Aliquam nec velit vitae augue egestas consequat a et quam. Aliquam erat volutpat. Etiam cursus enim ac dolor rhoncus gravida. Donec tincidunt fermentum magna, id lacinia tellus. Cras id egestas nisl, sed iaculis lacus. Maecenas eget varius ante. Sed congue eget nisi non ornare. Maecenas gravida commodo massa, quis rutrum sapien feugiat sed. Nullam vestibulum vel felis vitae auctor. Duis vel elit in nisi egestas facilisis quis sed quam. Mauris ornare in leo ac tincidunt. Cras finibus ligula at diam blandit accumsan. Morbi tempor cursus elit, id luctus lectus. Vivamus imperdiet tempor massa, vulputate tempus magna luctus eu. Morbi elementum, quam nec dapibus tempus, diam tellus semper nunc, et consectetur nibh quam eu risus. Cras porttitor, nisl vel lacinia mollis, tortor enim interdum lectus, nec viverra libero ligula eu leo. Suspendisse convallis fringilla sagittis. Aenean posuere placerat turpis a imperdiet. Sed sollicitudin, mauris at ornare maximus, libero magna ornare metus, semper sollicitudin tortor nunc ac sem. Nullam dictum, urna ut dapibus feugiat, lacus nisl interdum arcu, eu tristique nisl urna non nulla. Morbi eget accumsan erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae lectus condimentum, eleifend lacus sit amet, venenatis tortor. Integer cursus eleifend ante, mattis molestie mi. Nullam consectetur, nibh sagittis semper gravida, lorem massa bibendum arcu, non pulvinar libero metus ac dolor. Praesent commodo augue id turpis malesuada ultrices. In feugiat, neque eget semper tincidunt, ex nulla dictum felis, id aliquet mauris ex nec orci. Phasellus sodales tempor ante in dignissim. Maecenas non convallis neque. Mauris facilisis dolor ut turpis facilisis tempus ac sed ligula. Duis ac metus eu ligula imperdiet tincidunt. Ut molestie porta ipsum, eget dictum metus venenatis a. Sed consequat finibus tellus vel interdum. Morbi vulputate dui sit amet scelerisque sagittis. Suspendisse luctus nec tellus ac aliquet. Nunc gravida, metus eget eleifend consequat, augue est pulvinar ipsum, sed tristique lorem metus finibus ante. Suspendisse mattis tincidunt nunc, ut semper lorem pretium eu. Vestibulum et lectus at justo scelerisque fringilla. Donec placerat sollicitudin laoreet. Proin at velit in nulla finibus finibus in nec lacus. Phasellus eu ipsum et libero pellentesque vulputate id at augue. Vivamus vehicula consectetur nulla, non pellentesque sem porta eu. Pellentesque sapien metus, rutrum in dui sed, congue scelerisque elit. Vestibulum quis arcu dolor. Nunc accumsan vel eros sit amet fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id est porttitor, aliquam mi a, dignissim nisi. Integer faucibus aliquet justo, at varius massa auctor vel. Morbi placerat porttitor urna, a bibendum mauris placerat sed. Mauris fermentum quam eu libero condimentum tristique. Morbi faucibus, neque a consectetur semper, nisl ex tincidunt orci, vel condimentum tellus nisi et ex. Aenean eget bibendum nulla. Donec quis eros eget erat blandit lacinia ac at velit. Morbi convallis eros enim, in porta tellus lacinia eget. Morbi molestie, tortor eu sollicitudin fringilla, velit nunc tincidunt ante, sed convallis eros libero vel sapien. Ut feugiat tellus sit amet nunc efficitur sodales. Phasellus eget enim felis. Duis ornare magna ut pulvinar congue. In cursus nisl eget leo varius finibus. Sed semper erat non enim tincidunt, et tincidunt neque feugiat. Nulla non ipsum elit. Cras laoreet, ligula id finibus posuere, metus justo commodo massa, ut feugiat justo risus sit amet eros. Proin pharetra nec lectus tempus laoreet. Vivamus a metus ultrices, pulvinar lorem a, lacinia nisi. Ut in fringilla augue, quis aliquet erat. Suspendisse tincidunt pellentesque leo at fringilla. Donec in libero sed felis rhoncus aliquet ut et nisl. Curabitur vitae consectetur sem, vitae bibendum dolor. Quisque odio libero, fermentum ut tellus sed, bibendum commodo odio. Duis dapibus sem at eros accumsan, vel lacinia sem dignissim. Praesent porttitor tortor id facilisis imperdiet. Phasellus mi ipsum, rhoncus et elit at, malesuada condimentum dolor. Phasellus blandit quam placerat, euismod dolor at, suscipit lacus. Nunc eros metus, tincidunt a vulputate eget, vulputate id nibh. Sed bibendum eros egestas ligula tristique, et lacinia tortor pharetra. Sed magna nisl, laoreet in diam vel, vulputate dapibus eros. Cras rutrum venenatis augue, eget sollicitudin ante tincidunt sit amet. Pellentesque habitant morbi tristique senectus et.netus et malesuada fames ac turpis egestas. Sed a nunc ut nisl imperdiet feugiat in et massa. Proin porta eleifend nunc pulvinar euismod. Suspendisse pretium sodales felis, id sollicitudin orci fringilla at. Pellentesque lobortis viverra nunc, vel commodo felis egestas vel. Nulla eget scelerisque ex, in tincidunt metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam a diam sed justo facilisis malesuada. Cras imperdiet arcu quis tellus luctus, ac vulputate sem ultrices. Etiam aliquet, mauris in tincidunt mattis, mi purus cursus nunc, eget laoreet sem sem a sapien. Pellentesque non venenatis nisl, vel pellentesque mauris. Cras libero sem, mollis vitae quam ut, scelerisque faucibus odio. Nunc venenatis, massa varius euismod fringilla, neque ex hendrerit purus, feugiat tincidunt lacus tellus eget dui. Aenean vitae vehicula turpis, a dignissim odio. Maecenas semper quam eu nulla ornare molestie. Aliquam ac tincidunt dolor, ac bibendum metus. Ut ut ex fermentum, dapibus justo eget, elementum orci. Praesent mattis leo in elementum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque habitant morbi tristique senectus et.netus et malesuada fames ac turpis egestas. Donec non arcu sagittis, maximus metus pulvinar, pellentesque ligula. Suspendisse potenti. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam et euismod odio. Mauris quis tortor laoreet, sollicitudin massa sit amet, ultrices ex. Curabitur scelerisque massa quam, ac dignissim velit ornare sed. Nam laoreet erat ut leo bibendum pretium. Sed eu faucibus velit. Nullam tincidunt risus bibendum enim hendrerit luctus. Etiam ornare mauris vel odio laoreet, eget tempor nisl faucibus. Cras vel ultrices tortor, in convallis metus. Maecenas sed mollis lacus, sed bibendum nisl. Duis viverra placerat metus id pulvinar. Fusce luctus ornare urna, nec tempor lacus tincidunt ut. Vivamus eros elit, aliquam a justo sed, pretium varius nisi. Vivamus nibh ante, tristique non vehicula laoreet, faucibus eget eros. Integer finibus eros nec dapibus rutrum. Phasellus quis dictum lectus. Nullam fringilla magna a purus ullamcorper iaculis. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus luctus arcu non facilisis. Nullam ac purus quis urna efficitur imperdiet nec vitae sapien. Donec maximus, dui vitae lacinia scelerisque, mauris tortor vehicula quam, non semper augue urna quis nibh. Praesent volutpat consequat euismod. Proin ultricies nulla ut tortor faucibus, eu posuere turpis lacinia. Fusce augue erat, posuere et congue eget, interdum vel sem. Ut quis velit ut velit pulvinar pharetra et sit amet sapien. Phasellus consectetur metus ante, eu sagittis purus aliquet id. Morbi tincidunt nisi vitae magna tincidunt commodo. In hac habitasse platea dictumst. Aliquam et odio in turpis suscipit lacinia ac sed metus. Integer sit amet mauris venenatis, laoreet purus eget, dapibus tortor. Sed sit amet enim sem. Proin vel arcu ante. Aenean sagittis lobortis malesuada. Fusce semper porttitor turpis id tristique. Aliquam justo odio, condimentum sit amet libero nec, hendrerit posuere ligula. In cursus dolor eget lacinia pretium. Vestibulum aliquet ut lectus sed vulputate. Morbi dapibus et elit nec maximus. Proin sit amet nunc vitae justo ornare suscipit sit amet egestas tellus. Ut sagittis tincidunt hendrerit. Praesent sed nisl arcu. Suspendisse dapibus, libero in blandit iaculis, eros tortor sagittis ligula, ac volutpat neque justo sed massa. Cras iaculis diam pulvinar ipsum finibus commodo. Sed purus risus, posuere vel odio ut, accumsan finibus risus. Nullam et eros egestas sapien tempus efficitur. In nec nibh nisi. Fusce viverra pharetra justo, eget posuere felis blandit at. Maecenas vitae odio a erat viverra varius. Vestibulum a condimentum diam. Aliquam erat volutpat. Praesent vitae odio tortor. Phasellus in aliquet neque, quis aliquam urna. </p>