Revamp Scrollspy using Intersection observer (#33421)

* Revamp scrollspy to use IntersectionObserver

* Add smooth scroll support

* Update scrollspy.js/md

* move functionality to method

* Update scrollspy.js

* Add SmoothScroll to docs example

* Refactor Using `Maps` and smaller methods

* Update scrollspy.md/js

* Update scrollspy.spec.js

* Support backwards compatibility

* minor optimizations

* Merge activation functionality

* Update scrollspy.md

* Update scrollspy.js

* Rewording some of the documentation changes

* Update scrollspy.js

* Update scrollspy.md

* tweaking calculation functionality & drop text that suggests, to deactivate target when wrapper is not visible

* tweak calculation

* Fix lint

* Support scrollspy in body & tests

* change doc example to a more valid solution

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>

1 files changed, 16 insertions, 2 deletions

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index b687a68e6e..330bd43bac 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -256,18 +256,32 @@
 
 // Scrollspy demo on fixed height div
 .scrollspy-example {
-  position: relative;
   height: 200px;
   margin-top: .5rem;
   overflow: auto;
 }
 
 .scrollspy-example-2 {
-  position: relative;
   height: 350px;
   overflow: auto;
 }
 
+.simple-list-example-scrollspy {
+  a {
+    padding: .25rem;
+    margin: .5rem 0;
+
+    &:focus {
+      background-color: rgba($bd-purple, .65);
+    }
+  }
+
+  .active {
+    background-color: rgba($bd-purple, .15);
+  }
+
+}
+
 .bd-example-border-utils {
   [class^="border"] {
     display: inline-block;