diff options
author | GeoSot <geo.sotis@gmail.com> | 2022-04-13 20:29:13 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-13 20:29:13 +0300 |
commit | ece16012270a9ef7781ce9269cb151c5e5961734 (patch) | |
tree | 2c0a639899c08835b58ab805d21149ccb45c1ca8 /site/assets | |
parent | cfd2f3f7787ba22feb78d916956f6f73746f3ee3 (diff) |
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>
Diffstat (limited to 'site/assets')
-rw-r--r-- | site/assets/scss/_component-examples.scss | 18 |
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; |