Scrollspy

Preview

This is a preview of the Bootstrap element. For more details, please visit the official Bootstrap page.

Example

This is just a super simple example of what scrollspy can be used for. For more examples and techniques, please visit the Bootstrap page.

Item 1 Item 2 Item 3 Item 4

Item 1

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure earum vitae odio quod quidem itaque fugiat, magni labore beatae quam dicta ea quis consequatur sed officiis deserunt, dolorum perferendis non. Odit aspernatur quasi consequuntur nobis, iste, recusandae quo temporibus dolor, exercitationem distinctio neque. Nisi a tempora impedit quis qui ab quod libero temporibus! Inventore pariatur dignissimos omnis ipsam repudiandae eveniet illo perferendis neque sequi delectus laudantium facere, nisi a fugiat recusandae consequuntur suscipit aspernatur, corrupti animi vitae debitis sed! Corporis expedita quis aliquam officia fugiat ad quae quisquam tempore? Unde quae atque hic inventore provident nisi, blanditiis debitis dolore ipsam ad iste amet vitae optio autem facere reiciendis corrupti animi enim est placeat quod sint! Id nulla illo pariatur ut.

Item 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. A perspiciatis tempora sequi natus in, libero excepturi repudiandae! Asperiores excepturi voluptatem ut fugit nam cum, et quod consequuntur, modi exercitationem culpa. Debitis accusamus quo non perspiciatis illum inventore magnam ipsa iste nobis facere sint ad expedita aliquid fugit beatae, nisi explicabo odit facilis? Dolore magni eum voluptas, ab et a amet aliquid commodi repudiandae illum, mollitia delectus culpa quasi dignissimos harum enim impedit suscipit! Omnis expedita at hic incidunt non voluptatum fuga. Dignissimos, sed vitae doloremque aliquid suscipit eveniet? Ratione assumenda, tempora eveniet magnam, consequuntur dolorem repellendus, provident fuga architecto suscipit magni tenetur! Eaque provident iusto cupiditate corrupti libero soluta animi repellendus, ratione pariatur cum voluptas amet, beatae magnam quam distinctio.

Item 3

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo sequi quaerat earum, veritatis quas fugiat maxime unde quia totam minus. Perferendis consequuntur tempora odio totam nesciunt ut ratione repellat et dolores distinctio eum nemo eius est voluptatum aliquid, rem cum neque. Necessitatibus, odio laborum unde sint facilis modi quo at, ab eligendi iure soluta itaque nostrum expedita optio sequi voluptate dolorum asperiores a labore. Accusantium fugit omnis nisi inventore, illum recusandae eos tempore labore necessitatibus unde nemo voluptatibus atque sapiente suscipit minus, reiciendis a sequi reprehenderit repudiandae nobis distinctio corrupti! Necessitatibus, libero. Est blanditiis odio aliquid repudiandae quasi sed, provident laborum dolorum tempora ducimus corrupti, autem recusandae vero voluptas labore facilis itaque sit inventore saepe. Deserunt voluptatum voluptas nostrum quasi?

Item 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste est ipsa harum. Facilis, ipsum blanditiis debitis distinctio placeat porro assumenda a fuga voluptatum dolor unde aliquid cupiditate neque optio perspiciatis officia, minima quasi. Aliquid ratione eos deserunt voluptas libero, eius blanditiis amet iste quos quo veritatis nemo ut nam, excepturi ad iusto sequi dolores doloribus itaque corporis ipsum harum eum! Ut, at non ipsa labore nostrum doloribus cumque quod dignissimos dicta. Laborum repudiandae consequuntur quaerat nihil ad amet maxime voluptatibus? Voluptates rem repudiandae, harum aut recusandae eos eum, maxime suscipit voluptatibus reprehenderit quam in dicta dolore sequi neque facere quidem alias laborum, ut animi fugit! Debitis ratione repellat veniam quam impedit qui, nisi nemo cumque nostrum, nesciunt ipsum fugiat distinctio!

<div class="row">
    <div class="col-4">
        <div id="list-example" class="list-group">
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
        </div>
    </div>
    <div class="col-8">
        <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" tabindex="0" style="position: relative; overflow: auto; height: 200px;">
            <h4 id="list-item-1">Item 1</h4>
            <p>...</p>
            <h4 id="list-item-2">Item 2</h4>
            <p>...</p>
            <h4 id="list-item-3">Item 3</h4>
            <p>...</p>
            <h4 id="list-item-4">Item 4</h4>
            <p>...</p>
        </div>
    </div>
</div>