ScrollSpy: make the threshold option configurable (#36750)

* feat(ScrollSpy): make the threshold option configurable

js/src/scrollspy.js

@@ -40,14 +40,16 @@ const Default = {
   offset: null, // TODO: v6 @deprecated, keep it for backwards compatibility reasons
   rootMargin: '0px 0px -25%',
   smoothScroll: false,
-  target: null
+  target: null,
+  threshold: [0.1, 0.5, 1]
 }
 
 const DefaultType = {
   offset: '(number|null)', // TODO v6 @deprecated, keep it for backwards compatibility reasons
   rootMargin: 'string',
   smoothScroll: 'boolean',
-  target: 'element'
+  target: 'element',
+  threshold: 'array'
 }
 
 /**
@@ -110,6 +112,13 @@ class ScrollSpy extends BaseComponent {
     // TODO: on v6 target should be given explicitly & remove the {target: 'ss-target'} case
     config.target = getElement(config.target) || document.body
 
+    // TODO: v6 Only for backwards compatibility reasons. Use rootMargin only
+    config.rootMargin = config.offset ? `${config.offset}px 0px -30%` : config.rootMargin
+
+    if (typeof config.threshold === 'string') {
+      config.threshold = config.threshold.split(',').map(value => Number.parseFloat(value))
+    }
+
     return config
   }
 
@@ -141,8 +150,8 @@ class ScrollSpy extends BaseComponent {
   _getNewObserver() {
     const options = {
       root: this._rootElement,
-      threshold: [0.1, 0.5, 1],
-      rootMargin: this._getRootMargin()
+      threshold: this._config.threshold,
+      rootMargin: this._config.rootMargin
     }
 
     return new IntersectionObserver(entries => this._observerCallback(entries), options)
@@ -187,11 +196,6 @@ class ScrollSpy extends BaseComponent {
     }
   }
 
-  // TODO: v6 Only for backwards compatibility reasons. Use rootMargin only
-  _getRootMargin() {
-    return this._config.offset ? `${this._config.offset}px 0px -30%` : this._config.rootMargin
-  }
-
   _initializeTargetsAndObservables() {
     this._targetLinks = new Map()
     this._observableSections = new Map()