From d0947a8c573a7e676605a67562ca90ee61639dca Mon Sep 17 00:00:00 2001
From: GeoSot <geo.sotis@gmail.com>
Date: Wed, 3 Mar 2021 02:33:02 +0200
Subject: [PATCH] revamp scrollspy to use IntersectionObserver

---
 js/src/scrollspy.js             | 231 ++++++++-----------
 js/tests/unit/scrollspy.spec.js | 389 +++++++++++++++-----------------
 2 files changed, 278 insertions(+), 342 deletions(-)

diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 25fcd5ad2ac6..468d4bf9c517 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -5,12 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import {
-  defineJQueryPlugin,
-  getElement,
-  getSelectorFromElement,
-  typeCheckConfig
-} from './util/index'
+import { defineJQueryPlugin, getElement, reflow, typeCheckConfig } from './util/index'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
@@ -28,19 +23,18 @@ const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
 const Default = {
-  offset: 10,
-  method: 'auto',
-  target: ''
+  target: null,
+  offset: null, // @deprecated, only for backwards Compatibility reasons
+  rootMargin: '0px 0px -40%'
 }
 
 const DefaultType = {
-  offset: 'number',
-  method: 'string',
-  target: '(string|element)'
+  target: 'element',
+  offset: '(number|null)', // @deprecated, only for backwards Compatibility reasons
+  rootMargin: 'string'
 }
 
 const EVENT_ACTIVATE = `activate${EVENT_KEY}`
-const EVENT_SCROLL = `scroll${EVENT_KEY}`
 const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
 
 const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
@@ -51,13 +45,9 @@ const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
 const SELECTOR_NAV_LINKS = '.nav-link'
 const SELECTOR_NAV_ITEMS = '.nav-item'
 const SELECTOR_LIST_ITEMS = '.list-group-item'
-const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`
 const SELECTOR_DROPDOWN = '.dropdown'
 const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
 
-const METHOD_OFFSET = 'offset'
-const METHOD_POSITION = 'position'
-
 /**
  * ------------------------------------------------------------------------
  * Class Definition
@@ -67,17 +57,15 @@ const METHOD_POSITION = 'position'
 class ScrollSpy extends BaseComponent {
   constructor(element, config) {
     super(element)
-    this._scrollElement = this._element.tagName === 'BODY' ? window : this._element
-    this._config = this._getConfig(config)
-    this._offsets = []
-    this._targets = []
-    this._activeTarget = null
-    this._scrollHeight = 0
 
-    EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process())
+    // this._element is  the observablesContainer
+    this._config = this._getConfig(config)
 
-    this.refresh()
-    this._process()
+    this._targetLinks = []
+    this._activeTarget = null
+    this._observableSections = []
+    this._observer = null
+    this.refresh() // initialize
   }
 
   // Getters
@@ -93,49 +81,27 @@ class ScrollSpy extends BaseComponent {
   // Public
 
   refresh() {
-    const autoMethod = this._scrollElement === this._scrollElement.window ?
-      METHOD_OFFSET :
-      METHOD_POSITION
-
-    const offsetMethod = this._config.method === 'auto' ?
-      autoMethod :
-      this._config.method
-
-    const offsetBase = offsetMethod === METHOD_POSITION ?
-      this._getScrollTop() :
-      0
-
-    this._offsets = []
-    this._targets = []
-    this._scrollHeight = this._getScrollHeight()
-
-    const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
-
-    targets.map(element => {
-      const targetSelector = getSelectorFromElement(element)
-      const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null
-
-      if (target) {
-        const targetBCR = target.getBoundingClientRect()
-        if (targetBCR.width || targetBCR.height) {
-          return [
-            Manipulator[offsetMethod](target).top + offsetBase,
-            targetSelector
-          ]
-        }
-      }
+    // `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`
+    this._targetLinks = SelectorEngine
+      .find('[href]', this._config.target)
+      .filter(el => el.hash.length > 0)// ensure that all have id
+
+    this._observableSections = this._targetLinks
+      .map(el => SelectorEngine.findOne(el.hash, this._element))
+      .filter(el => el)// filter nulls
+
+    reflow(this._element)
+    if (this._observer) {
+      this._observer.disconnect()
+    } else {
+      this._observer = this._getNewObserver()
+    }
 
-      return null
-    })
-      .filter(item => item)
-      .sort((a, b) => a[0] - b[0])
-      .forEach(item => {
-        this._offsets.push(item[0])
-        this._targets.push(item[1])
-      })
+    this._observableSections.forEach(section => this._observer.observe(section))
   }
 
   dispose() {
+    this._observer.disconnect()
     EventHandler.off(this._scrollElement, EVENT_KEY)
     super.dispose()
   }
@@ -149,84 +115,33 @@ class ScrollSpy extends BaseComponent {
       ...(typeof config === 'object' && config ? config : {})
     }
 
-    config.target = getElement(config.target) || document.documentElement
+    config.target = getElement(config.target)
 
     typeCheckConfig(NAME, config, DefaultType)
 
     return config
   }
 
-  _getScrollTop() {
-    return this._scrollElement === window ?
-      this._scrollElement.pageYOffset :
-      this._scrollElement.scrollTop
-  }
-
-  _getScrollHeight() {
-    return this._scrollElement.scrollHeight || Math.max(
-      document.body.scrollHeight,
-      document.documentElement.scrollHeight
-    )
-  }
-
-  _getOffsetHeight() {
-    return this._scrollElement === window ?
-      window.innerHeight :
-      this._scrollElement.getBoundingClientRect().height
-  }
-
-  _process() {
-    const scrollTop = this._getScrollTop() + this._config.offset
-    const scrollHeight = this._getScrollHeight()
-    const maxScroll = this._config.offset + scrollHeight - this._getOffsetHeight()
-
-    if (this._scrollHeight !== scrollHeight) {
-      this.refresh()
-    }
-
-    if (scrollTop >= maxScroll) {
-      const target = this._targets[this._targets.length - 1]
-
-      if (this._activeTarget !== target) {
-        this._activate(target)
-      }
-
+  _process(target) {
+    if (this._activeTarget === target) {
       return
     }
 
-    if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
-      this._activeTarget = null
-      this._clear()
+    this._clearActiveClass(this._config.target)
+    if (!target) {
       return
     }
 
-    for (let i = this._offsets.length; i--;) {
-      const isActiveTarget = this._activeTarget !== this._targets[i] &&
-          scrollTop >= this._offsets[i] &&
-          (typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1])
-
-      if (isActiveTarget) {
-        this._activate(this._targets[i])
-      }
-    }
-  }
-
-  _activate(target) {
     this._activeTarget = target
 
-    this._clear()
-
-    const queries = SELECTOR_LINK_ITEMS.split(',')
-      .map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`)
-
-    const link = SelectorEngine.findOne(queries.join(','), this._config.target)
+    target.classList.add(CLASS_NAME_ACTIVE)
 
-    link.classList.add(CLASS_NAME_ACTIVE)
-    if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
-      SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN))
+    if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) { // Activate dropdown parents
+      SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN))
         .classList.add(CLASS_NAME_ACTIVE)
     } else {
-      SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)
+      SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)
+      SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)
         .forEach(listGroup => {
           // Set triggered links parents as active
           // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
@@ -242,17 +157,71 @@ class ScrollSpy extends BaseComponent {
         })
     }
 
-    EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
+    EventHandler.trigger(this._element, EVENT_ACTIVATE, {
       relatedTarget: target
     })
   }
 
-  _clear() {
-    SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
-      .filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
+  _clearActiveClass(parent) {
+    if (parent !== this._config.target) {
+      parent.classList.remove(CLASS_NAME_ACTIVE)
+    }
+
+    SelectorEngine.find(`.${CLASS_NAME_ACTIVE}`, parent)
       .forEach(node => node.classList.remove(CLASS_NAME_ACTIVE))
   }
 
+  _getNewObserver() {
+    let previousVisibleEntryTop = 0
+    let previousParentScrollTop = 0
+
+    const activate = entry => {
+      previousVisibleEntryTop = entry.target.offsetTop
+      const targetToActivate = this._targetLinks.find(el => el.hash === `#${entry.target.id}`)
+      this._process(targetToActivate)
+    }
+
+    const callback = entries => {
+      const parentScrollTop = this._element.scrollTop
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const { offsetTop } = entry.target
+          const userScrollsDown = parentScrollTop >= previousParentScrollTop
+
+          if (userScrollsDown && offsetTop >= previousVisibleEntryTop) { // if we are scrolling down, pick the bigger offsetTop
+            activate(entry)
+            return
+          }
+
+          if (!userScrollsDown && offsetTop < previousVisibleEntryTop) {// if we are scrolling up, pick the smallest offsetTop
+            activate(entry)
+          }
+
+          return
+        }
+
+        const notVisibleElement = this._targetLinks.find(el => el.hash === `#${entry.target.id}`)
+        this._clearActiveClass(notVisibleElement)
+      })
+
+      previousParentScrollTop = this._element.scrollTop
+    }
+
+    const options = {
+      root: this._element,
+      threshold: 0,
+      rootMargin: this._getRootMargin()
+    }
+
+    return new IntersectionObserver(callback.bind(this), options)
+  }
+
+  _getRootMargin() { // Only for backwards compatibility reasons. Use rootMargin only
+    const { offset, rootMargin } = this._config
+
+    return offset ? `${offset}px 0px 0px` : rootMargin
+  }
+
   // Static
 
   static jQueryInterface(config) {
@@ -263,7 +232,7 @@ class ScrollSpy extends BaseComponent {
         return
       }
 
-      if (typeof data[config] === 'undefined') {
+      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
         throw new TypeError(`No method named "${config}"`)
       }
 
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index ad44d5b3c466..fabb12f47a9e 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -2,37 +2,78 @@ import ScrollSpy from '../../src/scrollspy'
 import Manipulator from '../../src/dom/manipulator'
 
 /** Test helpers */
-import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
+import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
 
 describe('ScrollSpy', () => {
   let fixtureEl
 
+  const onScrollStop = (callback, element, timeout = 100) => {
+    let handle = null
+    const onScroll = function () {
+      if (handle) {
+        window.clearTimeout(handle)
+      }
+
+      handle = setTimeout(() => {
+        element.removeEventListener('scroll', onScroll)
+        callback()
+      }, timeout + 10)
+    }
+
+    element.addEventListener('scroll', onScroll)
+  }
+
+  const getDummyFixture = () => {
+    return [
+      '<nav id="navBar" class="navbar">',
+      '  <ul class="nav">',
+      '    <li class="nav-item"><a id="li-jsm-1" class="nav-link" href="#div-jsm-1">div 1</a></li>',
+      '  </ul>',
+      '</nav>',
+      '<div class="content" data-bs-target="#navBar">',
+      '  <div id="div-jsm-1">div 1</div>',
+      '</div>'
+    ].join('')
+  }
+
   const testElementIsActiveAfterScroll = ({ elementSelector, targetSelector, contentEl, scrollSpy, spy, cb }) => {
     const element = fixtureEl.querySelector(elementSelector)
     const target = fixtureEl.querySelector(targetSelector)
-
     // add top padding to fix Chrome on Android failures
     const paddingTop = 5
-    const scrollHeight = Math.ceil(contentEl.scrollTop + Manipulator.position(target).top) + paddingTop
+    const parentOffset = getComputedStyle(contentEl).getPropertyValue('position') === 'relative' ? 0 : contentEl.offsetTop
+    const scrollHeight = (target.offsetTop - parentOffset) + paddingTop
+    // eslint-disable-next-line no-console
+    console.warn('--------------')
+    // eslint-disable-next-line no-console
+    console.log(scrollHeight, target.offsetTop, contentEl.offsetTop)
 
     function listener() {
+      // console.log(fixtureEl.innerHTML.replace(/</g, '\n <'), scrollHeight)
       expect(element.classList.contains('active')).toEqual(true)
-      contentEl.removeEventListener('scroll', listener)
-      expect(scrollSpy._process).toHaveBeenCalled()
+      expect(scrollSpy._activeTarget).toEqual(element)
       spy.calls.reset()
       cb()
     }
 
-    contentEl.addEventListener('scroll', listener)
-    contentEl.scrollTop = scrollHeight
+    setTimeout(() => { // in case we scroll something before the test
+      onScrollStop(listener, contentEl)
+      contentEl.scrollTo({ top: scrollHeight })
+    }, 5)
   }
 
   beforeAll(() => {
     fixtureEl = getFixture()
   })
+  beforeEach(() => {
+    // eslint-disable-next-line no-console
+    console.clear()
+  })
 
   afterEach(() => {
     clearFixture()
+    // eslint-disable-next-line no-console
+    console.log('------end--------')
   })
 
   describe('VERSION', () => {
@@ -55,10 +96,10 @@ describe('ScrollSpy', () => {
 
   describe('constructor', () => {
     it('should take care of element either passed as a CSS selector or DOM element', () => {
-      fixtureEl.innerHTML = '<nav id="navigation"></nav><div class="content"></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const sSpyEl = fixtureEl.querySelector('#navigation')
-      const sSpyBySelector = new ScrollSpy('#navigation')
+      const sSpyEl = fixtureEl.querySelector('.content')
+      const sSpyBySelector = new ScrollSpy('.content')
       const sSpyByElement = new ScrollSpy(sSpyEl)
 
       expect(sSpyBySelector._element).toEqual(sSpyEl)
@@ -75,8 +116,8 @@ describe('ScrollSpy', () => {
         '  </ul>',
         '</nav>',
         '<div id="content" style="height: 200px; overflow-y: auto;">',
-        ' <div id="two" style="height: 300px;"></div>',
-        ' <div id="three" style="height: 10px;"></div>',
+        ' <div id="two" style="height: 300px;">test</div>',
+        ' <div id="three" style="height: 10px;">test2</div>',
         '</div>'
       ].join('')
 
@@ -84,7 +125,7 @@ describe('ScrollSpy', () => {
         target: '#navigation'
       })
 
-      expect(scrollSpy._targets.length).toEqual(2)
+      expect(scrollSpy._targetLinks.length).toEqual(2)
     })
 
     it('should only switch "active" class on current target', done => {
@@ -113,49 +154,6 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
-      const rootEl = fixtureEl.querySelector('#root')
-      const scrollSpy = new ScrollSpy(scrollSpyEl, {
-        target: 'ss-target'
-      })
-
-      spyOn(scrollSpy, '_process').and.callThrough()
-
-      scrollSpyEl.addEventListener('scroll', () => {
-        expect(rootEl.classList.contains('active')).toEqual(true)
-        expect(scrollSpy._process).toHaveBeenCalled()
-        done()
-      })
-
-      scrollSpyEl.scrollTop = 350
-    })
-
-    it('should only switch "active" class on current target specified w element', done => {
-      fixtureEl.innerHTML = [
-        '<div id="root" class="active" style="display: block">',
-        '  <div class="topbar">',
-        '    <div class="topbar-inner">',
-        '      <div class="container" id="ss-target">',
-        '        <ul class="nav">',
-        '          <li class="nav-item"><a href="#masthead">Overview</a></li>',
-        '          <li class="nav-item"><a href="#detail">Detail</a></li>',
-        '        </ul>',
-        '      </div>',
-        '    </div>',
-        '  </div>',
-        '  <div id="scrollspy-example" style="height: 100px; overflow: auto;">',
-        '    <div style="height: 200px;">',
-        '      <h4 id="masthead">Overview</h4>',
-        '      <p style="height: 200px;"></p>',
-        '    </div>',
-        '    <div style="height: 200px;">',
-        '      <h4 id="detail">Detail</h4>',
-        '      <p style="height: 200px;"></p>',
-        '    </div>',
-        '  </div>',
-        '</div>'
-      ].join('')
-
       const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
       const rootEl = fixtureEl.querySelector('#root')
       const scrollSpy = new ScrollSpy(scrollSpyEl, {
@@ -164,49 +162,52 @@ describe('ScrollSpy', () => {
 
       spyOn(scrollSpy, '_process').and.callThrough()
 
-      scrollSpyEl.addEventListener('scroll', () => {
+      onScrollStop(() => {
         expect(rootEl.classList.contains('active')).toEqual(true)
+        expect(scrollSpy._activeTarget).toEqual(fixtureEl.querySelector('[href="#detail"]'))
         expect(scrollSpy._process).toHaveBeenCalled()
         done()
-      })
+      }, scrollSpyEl)
 
-      scrollSpyEl.scrollTop = 350
+      scrollSpyEl.scrollTo({ top: 350, behavior: 'smooth' })
     })
 
     it('should correctly select middle navigation option when large offset is used', done => {
       fixtureEl.innerHTML = [
-        '<div id="header" style="height: 500px;"></div>',
-        '<nav id="navigation" class="navbar">',
-        ' <ul class="navbar-nav">',
-        '   <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
-        '   <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
-        '   <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
-        ' </ul>',
-        '</nav>',
-        '<div id="content" style="height: 200px; overflow-y: auto;">',
-        ' <div id="one" style="height: 500px;"></div>',
-        ' <div id="two" style="height: 300px;"></div>',
-        ' <div id="three" style="height: 10px;"></div>',
+        '<div id="wrapper">',
+        '  <div id="header" style="height: 500px;"></div>',
+        '  <nav id="navigation" class="navbar">',
+        '   <ul class="navbar-nav">',
+        '     <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
+        '     <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
+        '     <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
+        '   </ul>',
+        '  </nav>',
+        '  <div id="content" style="height: 200px; overflow-y: auto;">',
+        '   <div id="one" style="height: 500px;"></div>',
+        '   <div id="two" style="height: 300px;"></div>',
+        '   <div id="three" style="height: 10px;"></div>',
+        '  </div>',
         '</div>'
       ].join('')
 
       const contentEl = fixtureEl.querySelector('#content')
-      const scrollSpy = new ScrollSpy(contentEl, {
+      const scrollSpy = new ScrollSpy('#wrapper', {
         target: '#navigation',
         offset: Manipulator.position(contentEl).top
       })
 
       spyOn(scrollSpy, '_process').and.callThrough()
 
-      contentEl.addEventListener('scroll', () => {
+      onScrollStop(() => {
         expect(fixtureEl.querySelector('#one-link').classList.contains('active')).toEqual(false)
         expect(fixtureEl.querySelector('#two-link').classList.contains('active')).toEqual(true)
         expect(fixtureEl.querySelector('#three-link').classList.contains('active')).toEqual(false)
         expect(scrollSpy._process).toHaveBeenCalled()
         done()
-      })
+      }, contentEl)
 
-      contentEl.scrollTop = 550
+      contentEl.scrollTo({ top: 550 })
     })
 
     it('should add the active class to the correct element', done => {
@@ -249,7 +250,7 @@ describe('ScrollSpy', () => {
       })
     })
 
-    it('should add the active class to the correct element (nav markup)', done => {
+    it('should add to nav, the active class to the correct element (nav markup)', done => {
       fixtureEl.innerHTML = [
         '<nav class="navbar">',
         '  <nav class="nav">',
@@ -289,7 +290,7 @@ describe('ScrollSpy', () => {
       })
     })
 
-    it('should add the active class to the correct element (list-group markup)', done => {
+    it('should add to list-group, the active class to the correct element (list-group markup)', done => {
       fixtureEl.innerHTML = [
         '<nav class="navbar">',
         '  <div class="list-group">',
@@ -331,7 +332,6 @@ describe('ScrollSpy', () => {
 
     it('should clear selection if above the first section', done => {
       fixtureEl.innerHTML = [
-        '<div id="header" style="height: 500px;"></div>',
         '<nav id="navigation" class="navbar">',
         '  <ul class="navbar-nav">',
         '    <li class="nav-item"><a id="one-link"   class="nav-link active" href="#one">One</a></li>',
@@ -339,7 +339,7 @@ describe('ScrollSpy', () => {
         '    <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
         '  </ul>',
         '</nav>',
-        '<div id="content" style="height: 200px; overflow-y: auto;">',
+        '<div id="content" style="height: 150px; overflow-y: auto;">',
         '  <div id="spacer" style="height: 100px;"></div>',
         '  <div id="one" style="height: 100px;"></div>',
         '  <div id="two" style="height: 100px;"></div>',
@@ -349,31 +349,25 @@ describe('ScrollSpy', () => {
       ].join('')
 
       const contentEl = fixtureEl.querySelector('#content')
+      // eslint-disable-next-line no-unused-vars
       const scrollSpy = new ScrollSpy(contentEl, {
-        target: '#navigation',
-        offset: Manipulator.position(contentEl).top
+        target: '#navigation'
       })
-      const spy = spyOn(scrollSpy, '_process').and.callThrough()
 
-      let firstTime = true
+      onScrollStop(() => {
+        const active = () => fixtureEl.querySelector('.active')
 
-      contentEl.addEventListener('scroll', () => {
-        const active = fixtureEl.querySelector('.active')
+        expect(fixtureEl.querySelectorAll('.active').length).toEqual(1)
+        expect(active().getAttribute('id')).toEqual('two-link')
 
-        expect(spy).toHaveBeenCalled()
-        spy.calls.reset()
-        if (firstTime) {
-          expect(fixtureEl.querySelectorAll('.active').length).toEqual(1)
-          expect(active.getAttribute('id')).toEqual('two-link')
-          firstTime = false
-          contentEl.scrollTop = 0
-        } else {
-          expect(active).toBeNull()
+        onScrollStop(() => {
+          expect(active()).toBeNull()
           done()
-        }
-      })
+        }, contentEl)
+        contentEl.scrollTo({ top: 0 })
+      }, contentEl)
 
-      contentEl.scrollTop = 201
+      contentEl.scrollTo({ top: 201 })
     })
 
     it('should not clear selection if above the first section and first section is at the top', done => {
@@ -386,7 +380,7 @@ describe('ScrollSpy', () => {
         '    <li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>',
         '  </ul>',
         '</nav>',
-        '<div id="content" style="height: 200px; overflow-y: auto;">',
+        '<div id="content" style="height: 150px; overflow-y: auto;">',
         '  <div id="one" style="height: 100px;"></div>',
         '  <div id="two" style="height: 100px;"></div>',
         '  <div id="three" style="height: 100px;"></div>',
@@ -394,35 +388,32 @@ describe('ScrollSpy', () => {
         '</div>'
       ].join('')
 
-      const negativeHeight = -10
       const startOfSectionTwo = 101
       const contentEl = fixtureEl.querySelector('#content')
       const scrollSpy = new ScrollSpy(contentEl, {
-        target: '#navigation',
-        offset: contentEl.offsetTop
+        target: '#navigation'
       })
       const spy = spyOn(scrollSpy, '_process').and.callThrough()
 
-      let firstTime = true
-
-      contentEl.addEventListener('scroll', () => {
-        const active = fixtureEl.querySelector('.active')
+      onScrollStop(() => {
+        const activeId = () => fixtureEl.querySelector('.active').getAttribute('id')
 
         expect(spy).toHaveBeenCalled()
         spy.calls.reset()
-        if (firstTime) {
-          expect(fixtureEl.querySelectorAll('.active').length).toEqual(1)
-          expect(active.getAttribute('id')).toEqual('two-link')
-          firstTime = false
-          contentEl.scrollTop = negativeHeight
-        } else {
+        expect(fixtureEl.querySelectorAll('.active').length).toEqual(1)
+        expect(activeId()).toEqual('two-link')
+
+        onScrollStop(() => {
           expect(fixtureEl.querySelectorAll('.active').length).toEqual(1)
-          expect(active.getAttribute('id')).toEqual('one-link')
+          expect(spy).toHaveBeenCalled()
+          expect(activeId()).toEqual('one-link')
           done()
-        }
-      })
+        }, contentEl)
 
-      contentEl.scrollTop = startOfSectionTwo
+        contentEl.scrollTo({ top: 0 })
+      }, contentEl)
+
+      contentEl.scrollTo({ top: startOfSectionTwo })
     })
 
     it('should correctly select navigation element on backward scrolling when each target section height is 100%', done => {
@@ -436,7 +427,7 @@ describe('ScrollSpy', () => {
         '    <li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>',
         '  </ul>',
         '</nav>',
-        '<div class="content" style="position: relative; overflow: auto; height: 100px">',
+        '<div class="content" style="overflow: auto; position: relative; height: 100px">',
         '  <div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>',
         '  <div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>',
         '  <div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>',
@@ -459,7 +450,7 @@ describe('ScrollSpy', () => {
         spy,
         contentEl,
         cb() {
-          contentEl.scrollTop = 0
+          contentEl.scrollTo({ top: 0 })
           testElementIsActiveAfterScroll({
             elementSelector: '#li-100-4',
             targetSelector: '#div-100-4',
@@ -467,7 +458,7 @@ describe('ScrollSpy', () => {
             spy,
             contentEl,
             cb() {
-              contentEl.scrollTop = 0
+              contentEl.scrollTo({ top: 0 })
               testElementIsActiveAfterScroll({
                 elementSelector: '#li-100-3',
                 targetSelector: '#div-100-3',
@@ -475,7 +466,7 @@ describe('ScrollSpy', () => {
                 spy,
                 contentEl,
                 cb() {
-                  contentEl.scrollTop = 0
+                  contentEl.scrollTo({ top: 0 })
                   testElementIsActiveAfterScroll({
                     elementSelector: '#li-100-2',
                     targetSelector: '#div-100-2',
@@ -483,7 +474,7 @@ describe('ScrollSpy', () => {
                     spy,
                     contentEl,
                     cb() {
-                      contentEl.scrollTop = 0
+                      contentEl.scrollTo({ top: 0 })
                       testElementIsActiveAfterScroll({
                         elementSelector: '#li-100-1',
                         targetSelector: '#div-100-1',
@@ -501,116 +492,58 @@ describe('ScrollSpy', () => {
         }
       })
     })
-
-    it('should allow passed in option offset method: offset', () => {
-      fixtureEl.innerHTML = [
-        '<nav class="navbar">',
-        '  <ul class="nav">',
-        '    <li class="nav-item"><a id="li-jsm-1" class="nav-link" href="#div-jsm-1">div 1</a></li>',
-        '    <li class="nav-item"><a id="li-jsm-2" class="nav-link" href="#div-jsm-2">div 2</a></li>',
-        '    <li class="nav-item"><a id="li-jsm-3" class="nav-link" href="#div-jsm-3">div 3</a></li>',
-        '  </ul>',
-        '</nav>',
-        '<div class="content"  style="position: relative; overflow: auto; height: 100px">',
-        '  <div id="div-jsm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>',
-        '  <div id="div-jsm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>',
-        '  <div id="div-jsm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>',
-        '</div>'
-      ].join('')
-
-      const contentEl = fixtureEl.querySelector('.content')
-      const targetEl = fixtureEl.querySelector('#div-jsm-2')
-      const scrollSpy = new ScrollSpy(contentEl, {
-        target: '.navbar',
-        offset: 0,
-        method: 'offset'
-      })
-
-      expect(scrollSpy._offsets[1]).toEqual(Manipulator.offset(targetEl).top)
-      expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.position(targetEl).top)
-    })
-
-    it('should allow passed in option offset method: position', () => {
-      fixtureEl.innerHTML = [
-        '<nav class="navbar">',
-        '  <ul class="nav">',
-        '    <li class="nav-item"><a id="li-jsm-1" class="nav-link" href="#div-jsm-1">div 1</a></li>',
-        '    <li class="nav-item"><a id="li-jsm-2" class="nav-link" href="#div-jsm-2">div 2</a></li>',
-        '    <li class="nav-item"><a id="li-jsm-3" class="nav-link" href="#div-jsm-3">div 3</a></li>',
-        '  </ul>',
-        '</nav>',
-        '<div class="content"  style="position: relative; overflow: auto; height: 100px">',
-        '  <div id="div-jsm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>',
-        '  <div id="div-jsm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>',
-        '  <div id="div-jsm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>',
-        '</div>'
-      ].join('')
-
-      const contentEl = fixtureEl.querySelector('.content')
-      const targetEl = fixtureEl.querySelector('#div-jsm-2')
-      const scrollSpy = new ScrollSpy(contentEl, {
-        target: '.navbar',
-        offset: 0,
-        method: 'position'
-      })
-
-      expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.offset(targetEl).top)
-      expect(scrollSpy._offsets[1]).toEqual(Manipulator.position(targetEl).top)
-    })
   })
 
   describe('dispose', () => {
     it('should dispose a scrollspy', () => {
-      fixtureEl.innerHTML = '<div style="display: none;"></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const divEl = fixtureEl.querySelector('div')
-      spyOn(divEl, 'addEventListener').and.callThrough()
-      spyOn(divEl, 'removeEventListener').and.callThrough()
+      const el = fixtureEl.querySelector('.content')
+      const scrollSpy = new ScrollSpy(el)
 
-      const scrollSpy = new ScrollSpy(divEl)
-      expect(divEl.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), jasmine.any(Boolean))
+      expect(ScrollSpy.getInstance(el)).not.toBeNull()
 
       scrollSpy.dispose()
 
-      expect(divEl.removeEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), jasmine.any(Boolean))
+      expect(ScrollSpy.getInstance(el)).toBeNull()
     })
   })
 
   describe('jQueryInterface', () => {
     it('should create a scrollspy', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const div = fixtureEl.querySelector('div')
+      const div = fixtureEl.querySelector('.content')
 
       jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
       jQueryMock.elements = [div]
 
-      jQueryMock.fn.scrollspy.call(jQueryMock)
+      jQueryMock.fn.scrollspy.call(jQueryMock, { target: '#navBar' })
 
       expect(ScrollSpy.getInstance(div)).not.toBeNull()
     })
 
     it('should create a scrollspy with given config', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const div = fixtureEl.querySelector('div')
+      const div = fixtureEl.querySelector('.content')
 
       jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
       jQueryMock.elements = [div]
 
-      jQueryMock.fn.scrollspy.call(jQueryMock, { offset: 15 })
+      jQueryMock.fn.scrollspy.call(jQueryMock, { rootMargin: '100px' })
       spyOn(ScrollSpy.prototype, 'constructor')
-      expect(ScrollSpy.prototype.constructor).not.toHaveBeenCalledWith(div, { offset: 15 })
+      expect(ScrollSpy.prototype.constructor).not.toHaveBeenCalledWith(div, { rootMargin: '100px' })
 
       const scrollspy = ScrollSpy.getInstance(div)
       expect(scrollspy).not.toBeNull()
-      expect(scrollspy._config.offset).toBe(15)
+      expect(scrollspy._config.rootMargin).toBe('100px')
     })
 
     it('should not re create a scrollspy', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const div = fixtureEl.querySelector('div')
+      const div = fixtureEl.querySelector('.content')
       const scrollSpy = new ScrollSpy(div)
 
       jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
@@ -622,9 +555,9 @@ describe('ScrollSpy', () => {
     })
 
     it('should call a scrollspy method', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const div = fixtureEl.querySelector('div')
+      const div = fixtureEl.querySelector('.content')
       const scrollSpy = new ScrollSpy(div)
 
       spyOn(scrollSpy, 'refresh')
@@ -639,9 +572,9 @@ describe('ScrollSpy', () => {
     })
 
     it('should throw error on undefined method', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const div = fixtureEl.querySelector('div')
+      const div = fixtureEl.querySelector('.content')
       const action = 'undefinedMethod'
 
       jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
@@ -651,29 +584,60 @@ describe('ScrollSpy', () => {
         jQueryMock.fn.scrollspy.call(jQueryMock, action)
       }).toThrowError(TypeError, `No method named "${action}"`)
     })
+
+    it('should throw error on protected method', () => {
+      fixtureEl.innerHTML = getDummyFixture()
+
+      const div = fixtureEl.querySelector('.content')
+      const action = '_getConfig'
+
+      jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
+      jQueryMock.elements = [div]
+
+      expect(() => {
+        jQueryMock.fn.scrollspy.call(jQueryMock, action)
+      }).toThrowError(TypeError, `No method named "${action}"`)
+    })
+
+    it('should throw error if method "constructor" is being called', () => {
+      fixtureEl.innerHTML = getDummyFixture()
+
+      const div = fixtureEl.querySelector('.content')
+      const action = 'constructor'
+
+      jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
+      jQueryMock.elements = [div]
+
+      expect(() => {
+        jQueryMock.fn.scrollspy.call(jQueryMock, action)
+      }).toThrowError(TypeError, `No method named "${action}"`)
+    })
   })
 
   describe('getInstance', () => {
     it('should return scrollspy instance', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const div = fixtureEl.querySelector('div')
-      const scrollSpy = new ScrollSpy(div)
+      const div = fixtureEl.querySelector('.content')
+      const scrollSpy = new ScrollSpy(div, { target: fixtureEl.querySelector('#navBar') })
 
       expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)
       expect(ScrollSpy.getInstance(div)).toBeInstanceOf(ScrollSpy)
     })
 
     it('should return null if there is no instance', () => {
-      expect(ScrollSpy.getInstance(fixtureEl)).toEqual(null)
+      fixtureEl.innerHTML = getDummyFixture()
+
+      const div = fixtureEl.querySelector('.content')
+      expect(ScrollSpy.getInstance(div)).toEqual(null)
     })
   })
 
   describe('getOrCreateInstance', () => {
     it('should return scrollspy instance', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const div = fixtureEl.querySelector('div')
+      const div = fixtureEl.querySelector('.content')
       const scrollspy = new ScrollSpy(div)
 
       expect(ScrollSpy.getOrCreateInstance(div)).toEqual(scrollspy)
@@ -682,18 +646,18 @@ describe('ScrollSpy', () => {
     })
 
     it('should return new instance when there is no scrollspy instance', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const div = fixtureEl.querySelector('div')
+      const div = fixtureEl.querySelector('.content')
 
       expect(ScrollSpy.getInstance(div)).toEqual(null)
       expect(ScrollSpy.getOrCreateInstance(div)).toBeInstanceOf(ScrollSpy)
     })
 
     it('should return new instance when there is no scrollspy instance with given configuration', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const div = fixtureEl.querySelector('div')
+      const div = fixtureEl.querySelector('.content')
 
       expect(ScrollSpy.getInstance(div)).toEqual(null)
       const scrollspy = ScrollSpy.getOrCreateInstance(div, {
@@ -705,9 +669,9 @@ describe('ScrollSpy', () => {
     })
 
     it('should return the instance when exists without given configuration', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      fixtureEl.innerHTML = getDummyFixture()
 
-      const div = fixtureEl.querySelector('div')
+      const div = fixtureEl.querySelector('.content')
       const scrollspy = new ScrollSpy(div, {
         offset: 1
       })
@@ -725,9 +689,12 @@ describe('ScrollSpy', () => {
 
   describe('event handler', () => {
     it('should create scrollspy on window load event', () => {
-      fixtureEl.innerHTML = '<div data-bs-spy="scroll"></div>'
+      fixtureEl.innerHTML = [
+        '<div id="nav"></div>' +
+        '<div id="wrapper" data-bs-spy="scroll" data-bs-target="#nav"></div>'
+      ].join('')
 
-      const scrollSpyEl = fixtureEl.querySelector('div')
+      const scrollSpyEl = fixtureEl.querySelector('#wrapper')
 
       window.dispatchEvent(createEvent('load'))