diff --git a/site/content/docs/5.0/components/scrollspy.md b/site/content/docs/5.0/components/scrollspy.md index 94ea1f9e1f..245ac7aab2 100644 --- a/site/content/docs/5.0/components/scrollspy.md +++ b/site/content/docs/5.0/components/scrollspy.md @@ -12,11 +12,16 @@ Scrollspy has a few requirements to function properly: - It must be used on a Bootstrap [nav component]({{< docsref "/components/navs" >}}) or [list group]({{< docsref "/components/list-group" >}}). - Scrollspy requires `position: relative;` on the element you're spying on, usually the ``. -- When spying on elements other than the ``, be sure to have a `height` set and `overflow-y: scroll;` applied. - Anchors (``) are required and must point to an element with that `id`. When successfully implemented, your nav or list group will update accordingly, moving the `.active` class from one item to the next based on their associated targets. +{{< callout >}} +### Scrollable containers and keyboard access + +If you're making a scrollable container (other than the ``), be sure to have a `height` set and `overflow-y: scroll;` applied to it—alongside a `tabindex="0"` to ensure keyboard access. +{{< /callout >}} + ## Example in navbar Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well. @@ -42,7 +47,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown -
+

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

@@ -79,7 +84,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown -
+

@fat

...

@mdo

@@ -118,7 +123,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
-
+

Item 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Item 1-1
@@ -156,7 +161,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p -
+

Item 1

...

Item 1-1
@@ -189,7 +194,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
-
+

Item 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Item 2

@@ -210,7 +215,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group Item 3 Item 4
-
+

Item 1

...

Item 2