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>

4 files changed, 527 insertions, 452 deletions

diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js
index e3ee293c7d..5e6ad92ae7 100644
--- a/js/src/dom/manipulator.js
+++ b/js/src/dom/manipulator.js
@@ -57,22 +57,6 @@ const Manipulator = {
 
   getDataAttribute(element, key) {
     return normalizeData(element.getAttribute(`data-bs-${normalizeDataKey(key)}`))
-  },
-
-  offset(element) {
-    const rect = element.getBoundingClientRect()
-
-    return {
-      top: rect.top + window.pageYOffset,
-      left: rect.left + window.pageXOffset
-    }
-  },
-
-  position(element) {
-    return {
-      top: element.offsetTop,
-      left: element.offsetLeft
-    }
   }
 }
 
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 029970ed2a..71c111a941 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -5,9 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
-import { defineJQueryPlugin, getElement, getSelectorFromElement } from './util/index'
+import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index'
 import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
 import BaseComponent from './base-component'
 
@@ -21,34 +20,34 @@ const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
 const EVENT_ACTIVATE = `activate${EVENT_KEY}`
-const EVENT_SCROLL = `scroll${EVENT_KEY}`
+const EVENT_CLICK = `click${EVENT_KEY}`
 const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
 
 const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
 const CLASS_NAME_ACTIVE = 'active'
 
 const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]'
+const SELECTOR_TARGET_LINKS = '[href]'
 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_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_NAV_ITEMS} > ${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`
 const SELECTOR_DROPDOWN = '.dropdown'
 const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
 
-const METHOD_OFFSET = 'offset'
-const METHOD_POSITION = 'position'
-
 const Default = {
-  offset: 10,
-  method: 'auto',
-  target: ''
+  offset: null, // TODO: v6 @deprecated, keep it for backwards compatibility reasons
+  rootMargin: '0px 0px -25%',
+  smoothScroll: false,
+  target: null
 }
 
 const DefaultType = {
-  offset: 'number',
-  method: 'string',
-  target: '(string|element)'
+  offset: '(number|null)', // TODO v6 @deprecated, keep it for backwards compatibility reasons
+  rootMargin: 'string',
+  smoothScroll: 'boolean',
+  target: 'element'
 }
 
 /**
@@ -58,16 +57,18 @@ const DefaultType = {
 class ScrollSpy extends BaseComponent {
   constructor(element, config) {
     super(element, config)
-    this._scrollElement = this._element.tagName === 'BODY' ? window : this._element
-    this._offsets = []
-    this._targets = []
-    this._activeTarget = null
-    this._scrollHeight = 0
-
-    EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process())
 
-    this.refresh()
-    this._process()
+    // this._element is the observablesContainer and config.target the menu links wrapper
+    this._targetLinks = new Map()
+    this._observableSections = new Map()
+    this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element
+    this._activeTarget = null
+    this._observer = null
+    this._previousScrollData = {
+      visibleEntryTop: 0,
+      parentScrollTop: 0
+    }
+    this.refresh() // initialize
   }
 
   // Getters
@@ -85,145 +86,168 @@ class ScrollSpy extends BaseComponent {
 
   // Public
   refresh() {
-    this._offsets = []
-    this._targets = []
-    this._scrollHeight = this._getScrollHeight()
-
-    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
-    const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
-      .map(element => {
-        const targetSelector = getSelectorFromElement(element)
-        const target = targetSelector ? SelectorEngine.findOne(targetSelector) : null
-
-        if (!target) {
-          return null
-        }
+    this._initializeTargetsAndObservables()
+    this._maybeEnableSmoothScroll()
 
-        const targetBCR = target.getBoundingClientRect()
-
-        return targetBCR.width || targetBCR.height ?
-          [Manipulator[offsetMethod](target).top + offsetBase, targetSelector] :
-          null
-      })
-        .filter(Boolean)
-        .sort((a, b) => a[0] - b[0])
+    if (this._observer) {
+      this._observer.disconnect()
+    } else {
+      this._observer = this._getNewObserver()
+    }
 
-    for (const target of targets) {
-      this._offsets.push(target[0])
-      this._targets.push(target[1])
+    for (const section of this._observableSections.values()) {
+      this._observer.observe(section)
     }
   }
 
   dispose() {
-    EventHandler.off(this._scrollElement, EVENT_KEY)
+    this._observer.disconnect()
     super.dispose()
   }
 
   // Private
-
   _configAfterMerge(config) {
-    config.target = getElement(config.target) || document.documentElement
+    // TODO: on v6 target should be given explicitly & remove the {target: 'ss-target'} case
+    config.target = getElement(config.target) || document.body
 
     return config
   }
 
-  _getScrollTop() {
-    return this._scrollElement === window ?
-      this._scrollElement.pageYOffset :
-      this._scrollElement.scrollTop
-  }
+  _maybeEnableSmoothScroll() {
+    if (!this._config.smoothScroll) {
+      return
+    }
 
-  _getScrollHeight() {
-    return this._scrollElement.scrollHeight || Math.max(
-      document.body.scrollHeight,
-      document.documentElement.scrollHeight
-    )
-  }
+    // unregister any previous listeners
+    EventHandler.off(this._config.target, EVENT_CLICK)
+
+    EventHandler.on(this._config.target, EVENT_CLICK, SELECTOR_TARGET_LINKS, event => {
+      const observableSection = this._observableSections.get(event.target.hash)
+      if (observableSection) {
+        event.preventDefault()
+        const root = this._rootElement || window
+        const height = observableSection.offsetTop - this._element.offsetTop
+        if (root.scrollTo) {
+          root.scrollTo({ top: height })
+          return
+        }
 
-  _getOffsetHeight() {
-    return this._scrollElement === window ?
-      window.innerHeight :
-      this._scrollElement.getBoundingClientRect().height
+        // Chrome 60 doesn't support `scrollTo`
+        root.scrollTop = height
+      }
+    })
   }
 
-  _process() {
-    const scrollTop = this._getScrollTop() + this._config.offset
-    const scrollHeight = this._getScrollHeight()
-    const maxScroll = this._config.offset + scrollHeight - this._getOffsetHeight()
+  _getNewObserver() {
+    const options = {
+      root: this._rootElement,
+      threshold: [0.1, 0.5, 1],
+      rootMargin: this._getRootMargin()
+    }
+
+    return new IntersectionObserver(entries => this._observerCallback(entries), options)
+  }
 
-    if (this._scrollHeight !== scrollHeight) {
-      this.refresh()
+  // The logic of selection
+  _observerCallback(entries) {
+    const targetElement = entry => this._targetLinks.get(`#${entry.target.id}`)
+    const activate = entry => {
+      this._previousScrollData.visibleEntryTop = entry.target.offsetTop
+      this._process(targetElement(entry))
     }
 
-    if (scrollTop >= maxScroll) {
-      const target = this._targets[this._targets.length - 1]
+    const parentScrollTop = (this._rootElement || document.documentElement).scrollTop
+    const userScrollsDown = parentScrollTop >= this._previousScrollData.parentScrollTop
+    this._previousScrollData.parentScrollTop = parentScrollTop
+
+    for (const entry of entries) {
+      if (!entry.isIntersecting) {
+        this._activeTarget = null
+        this._clearActiveClass(targetElement(entry))
 
-      if (this._activeTarget !== target) {
-        this._activate(target)
+        continue
       }
 
-      return
-    }
+      const entryIsLowerThanPrevious = entry.target.offsetTop >= this._previousScrollData.visibleEntryTop
+      // if we are scrolling down, pick the bigger offsetTop
+      if (userScrollsDown && entryIsLowerThanPrevious) {
+        activate(entry)
+        // if parent isn't scrolled, let's keep the first visible item, breaking the iteration
+        if (!parentScrollTop) {
+          return
+        }
 
-    if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
-      this._activeTarget = null
-      this._clear()
-      return
+        continue
+      }
+
+      // if we are scrolling up, pick the smallest offsetTop
+      if (!userScrollsDown && !entryIsLowerThanPrevious) {
+        activate(entry)
+      }
     }
+  }
+
+  // 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()
+
+    const targetLinks = SelectorEngine.find(SELECTOR_TARGET_LINKS, this._config.target)
 
-    for (const i of this._offsets.keys()) {
-      const isActiveTarget = this._activeTarget !== this._targets[i] &&
-          scrollTop >= this._offsets[i] &&
-          (typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1])
+    for (const anchor of targetLinks) {
+      // ensure that the anchor has an id and is not disabled
+      if (!anchor.hash || isDisabled(anchor)) {
+        continue
+      }
+
+      const observableSection = SelectorEngine.findOne(anchor.hash, this._element)
 
-      if (isActiveTarget) {
-        this._activate(this._targets[i])
+      // ensure that the observableSection exists & is visible
+      if (isVisible(observableSection)) {
+        this._targetLinks.set(anchor.hash, anchor)
+        this._observableSections.set(anchor.hash, observableSection)
       }
     }
   }
 
-  _activate(target) {
-    this._activeTarget = target
-
-    this._clear()
+  _process(target) {
+    if (this._activeTarget === target) {
+      return
+    }
 
-    const queries = SELECTOR_LINK_ITEMS.split(',')
-      .map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`)
+    this._clearActiveClass(this._config.target)
+    this._activeTarget = target
+    target.classList.add(CLASS_NAME_ACTIVE)
+    this._activateParents(target)
 
-    const link = SelectorEngine.findOne(queries.join(','), this._config.target)
+    EventHandler.trigger(this._element, EVENT_ACTIVATE, { relatedTarget: target })
+  }
 
-    link.classList.add(CLASS_NAME_ACTIVE)
-    if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
-      SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN))
+  _activateParents(target) {
+    // Activate dropdown parents
+    if (target.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
+      SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, target.closest(SELECTOR_DROPDOWN))
         .classList.add(CLASS_NAME_ACTIVE)
-    } else {
-      for (const listGroup of SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)) {
-        // Set triggered links parents as active
-        // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
-        for (const item of SelectorEngine.prev(listGroup, `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}`)) {
-          item.classList.add(CLASS_NAME_ACTIVE)
-        }
+      return
+    }
 
-        // Handle special case when .nav-link is inside .nav-item
-        for (const navItem of SelectorEngine.prev(listGroup, SELECTOR_NAV_ITEMS)) {
-          for (const item of SelectorEngine.children(navItem, SELECTOR_NAV_LINKS)) {
-            item.classList.add(CLASS_NAME_ACTIVE)
-          }
-        }
+    for (const listGroup of SelectorEngine.parents(target, SELECTOR_NAV_LIST_GROUP)) {
+      // Set triggered links parents as active
+      // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
+      for (const item of SelectorEngine.prev(listGroup, SELECTOR_LINK_ITEMS)) {
+        item.classList.add(CLASS_NAME_ACTIVE)
       }
     }
-
-    EventHandler.trigger(this._scrollElement, EVENT_ACTIVATE, {
-      relatedTarget: target
-    })
   }
 
-  _clear() {
-    const activeNodes = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
-      .filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
+  _clearActiveClass(parent) {
+    parent.classList.remove(CLASS_NAME_ACTIVE)
 
+    const activeNodes = SelectorEngine.find(`${SELECTOR_TARGET_LINKS}.${CLASS_NAME_ACTIVE}`, parent)
     for (const node of activeNodes) {
       node.classList.remove(CLASS_NAME_ACTIVE)
     }
@@ -238,7 +262,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}"`)
       }
 
@@ -253,7 +277,7 @@ class ScrollSpy extends BaseComponent {
 
 EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
   for (const spy of SelectorEngine.find(SELECTOR_DATA_SPY)) {
-    new ScrollSpy(spy) // eslint-disable-line no-new
+    ScrollSpy.getOrCreateInstance(spy)
   }
 })
 
diff --git a/js/tests/unit/dom/manipulator.spec.js b/js/tests/unit/dom/manipulator.spec.js
index 95af902ff5..2ed1995b60 100644
--- a/js/tests/unit/dom/manipulator.spec.js
+++ b/js/tests/unit/dom/manipulator.spec.js
@@ -105,86 +105,4 @@ describe('Manipulator', () => {
       expect(Manipulator.getDataAttribute(div, 'test')).toEqual(1)
     })
   })
-
-  describe('offset', () => {
-    it('should return an object with two properties top and left, both numbers', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      const div = fixtureEl.querySelector('div')
-      const offset = Manipulator.offset(div)
-
-      expect(offset).toBeDefined()
-      expect(offset.top).toEqual(jasmine.any(Number))
-      expect(offset.left).toEqual(jasmine.any(Number))
-    })
-
-    it('should return offset relative to attached element\'s offset', () => {
-      const top = 500
-      const left = 1000
-
-      fixtureEl.innerHTML = `<div style="position:absolute;top:${top}px;left:${left}px"></div>`
-
-      const div = fixtureEl.querySelector('div')
-      const offset = Manipulator.offset(div)
-      const fixtureOffset = Manipulator.offset(fixtureEl)
-
-      expect(offset).toEqual({
-        top: fixtureOffset.top + top,
-        left: fixtureOffset.left + left
-      })
-    })
-
-    it('should not change offset when viewport is scrolled', () => {
-      return new Promise(resolve => {
-        const top = 500
-        const left = 1000
-        const scrollY = 200
-        const scrollX = 400
-
-        fixtureEl.innerHTML = `<div style="position:absolute;top:${top}px;left:${left}px"></div>`
-
-        const div = fixtureEl.querySelector('div')
-        const offset = Manipulator.offset(div)
-
-        // append an element that forces scrollbars on the window so we can scroll
-        const { defaultView: win, body } = fixtureEl.ownerDocument
-        const forceScrollBars = document.createElement('div')
-        forceScrollBars.style.cssText = 'position:absolute;top:5000px;left:5000px;width:1px;height:1px'
-        body.append(forceScrollBars)
-
-        const scrollHandler = () => {
-          expect(window.pageYOffset).toEqual(scrollY)
-          expect(window.pageXOffset).toEqual(scrollX)
-
-          const newOffset = Manipulator.offset(div)
-
-          expect(newOffset).toEqual({
-            top: offset.top,
-            left: offset.left
-          })
-
-          win.removeEventListener('scroll', scrollHandler)
-          forceScrollBars.remove()
-          win.scrollTo(0, 0)
-          resolve()
-        }
-
-        win.addEventListener('scroll', scrollHandler)
-        win.scrollTo(scrollX, scrollY)
-      })
-    })
-  })
-
-  describe('position', () => {
-    it('should return an object with two properties top and left, both numbers', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      const div = fixtureEl.querySelector('div')
-      const position = Manipulator.position(div)
-
-      expect(position).toBeDefined()
-      expect(position.top).toEqual(jasmine.any(Number))
-      expect(position.left).toEqual(jasmine.any(Number))
-    })
-  })
 })
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index 96ef3aedf1..778c37a381 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -1,28 +1,71 @@
 import ScrollSpy from '../../src/scrollspy'
-import Manipulator from '../../src/dom/manipulator'
+
+/** Test helpers */
 import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
+import EventHandler from '../../src/dom/event-handler'
 
 describe('ScrollSpy', () => {
   let fixtureEl
 
-  const testElementIsActiveAfterScroll = ({ elementSelector, targetSelector, contentEl, scrollSpy, spy, cb }) => {
+  const getElementScrollSpy = element => element.scrollTo ?
+    spyOn(element, 'scrollTo').and.callThrough() :
+    spyOnProperty(element, 'scrollTop', 'set').and.callThrough()
+
+  const scrollTo = (el, height) => {
+    el.scrollTop = height
+  }
+
+  const onScrollStop = (callback, element, timeout = 30) => {
+    let handle = null
+    const onScroll = function () {
+      if (handle) {
+        window.clearTimeout(handle)
+      }
+
+      handle = setTimeout(() => {
+        element.removeEventListener('scroll', onScroll)
+        callback()
+      }, timeout + 1)
+    }
+
+    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" style="overflow-y: auto">',
+      '  <div id="div-jsm-1">div 1</div>',
+      '</div>'
+    ].join('')
+  }
+
+  const testElementIsActiveAfterScroll = ({ elementSelector, targetSelector, contentEl, scrollSpy, 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 paddingTop = 0
+    const parentOffset = getComputedStyle(contentEl).getPropertyValue('position') === 'relative' ? 0 : contentEl.offsetTop
+    const scrollHeight = (target.offsetTop - parentOffset) + paddingTop
+
+    contentEl.addEventListener('activate.bs.scrollspy', event => {
+      if (scrollSpy._activeTarget !== element) {
+        return
+      }
 
-    function listener() {
       expect(element).toHaveClass('active')
-      contentEl.removeEventListener('scroll', listener)
-      expect(scrollSpy._process).toHaveBeenCalled()
-      spy.calls.reset()
+      expect(scrollSpy._activeTarget).toEqual(element)
+      expect(event.relatedTarget).toEqual(element)
       cb()
-    }
+    })
 
-    contentEl.addEventListener('scroll', listener)
-    contentEl.scrollTop = scrollHeight
+    setTimeout(() => { // in case we scroll something before the test
+      scrollTo(contentEl, scrollHeight)
+    }, 100)
   }
 
   beforeAll(() => {
@@ -53,16 +96,60 @@ 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)
       expect(sSpyByElement._element).toEqual(sSpyEl)
     })
 
+    it('should null, if element is not scrollable', () => {
+      fixtureEl.innerHTML = [
+        '<nav id="navigation" class="navbar">',
+        '  <ul class="navbar-nav">' +
+        '     <li class="nav-item"><a class="nav-link active" id="one-link" href="#">One</a></li>' +
+        '  </ul>',
+        '</nav>',
+        '<div id="content">',
+        '  <div id="1" style="height: 300px;">test</div>',
+        '</div>'
+      ].join('')
+
+      const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {
+        target: '#navigation'
+      })
+
+      expect(scrollSpy._observer.root).toBeNull()
+      expect(scrollSpy._rootElement).toBeNull()
+    })
+
+    it('should not take count to not visible sections', () => {
+      fixtureEl.innerHTML = [
+        '<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: 300px;">test</div>',
+        '  <div id="two" hidden style="height: 300px;">test</div>',
+        '  <div id="three"  style="display: none;">test</div>',
+        '</div>'
+      ].join('')
+
+      const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {
+        target: '#navigation'
+      })
+
+      expect(scrollSpy._observableSections.size).toBe(1)
+      expect(scrollSpy._targetLinks.size).toBe(1)
+    })
+
     it('should not process element without target', () => {
       fixtureEl.innerHTML = [
         '<nav id="navigation" class="navbar">',
@@ -73,8 +160,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('')
 
@@ -82,7 +169,7 @@ describe('ScrollSpy', () => {
         target: '#navigation'
       })
 
-      expect(scrollSpy._targets).toHaveSize(2)
+      expect(scrollSpy._targetLinks).toHaveSize(2)
     })
 
     it('should only switch "active" class on current target', () => {
@@ -100,14 +187,8 @@ describe('ScrollSpy', () => {
           '    </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 style="height: 200px;" id="masthead">Overview</div>',
+          '     <div style="height: 200px;" id="detail">Detail</div>',
           '  </div>',
           '</div>'
         ].join('')
@@ -120,13 +201,52 @@ describe('ScrollSpy', () => {
 
         spyOn(scrollSpy, '_process').and.callThrough()
 
-        scrollSpyEl.addEventListener('scroll', () => {
+        onScrollStop(() => {
           expect(rootEl).toHaveClass('active')
           expect(scrollSpy._process).toHaveBeenCalled()
           resolve()
+        }, scrollSpyEl)
+
+        scrollTo(scrollSpyEl, 350)
+      })
+    })
+
+    it('should not process data if `activeTarget` is same as given target', () => {
+      return new Promise((resolve, reject) => {
+        fixtureEl.innerHTML = [
+          '<nav class="navbar">',
+          '  <ul class="nav">',
+          '    <li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>',
+          '    <li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>',
+          '  </ul>',
+          '</nav>',
+          '<div class="content" style="overflow: auto; height: 50px">',
+          '  <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
+          '  <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
+          '</div>'
+        ].join('')
+
+        const contentEl = fixtureEl.querySelector('.content')
+        const scrollSpy = new ScrollSpy(contentEl, {
+          offset: 0,
+          target: '.navbar'
         })
 
-        scrollSpyEl.scrollTop = 350
+        const triggerSpy = spyOn(EventHandler, 'trigger').and.callThrough()
+
+        scrollSpy._activeTarget = fixtureEl.querySelector('#a-1')
+        testElementIsActiveAfterScroll({
+          elementSelector: '#a-1',
+          targetSelector: '#div-1',
+          contentEl,
+          scrollSpy,
+          cb: reject
+        })
+
+        setTimeout(() => {
+          expect(triggerSpy).not.toHaveBeenCalled()
+          resolve()
+        }, 100)
       })
     })
 
@@ -145,14 +265,8 @@ describe('ScrollSpy', () => {
           '    </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 style="height: 200px;" id="masthead">Overview</div>',
+          '    <div style="height: 200px;" id="detail">Detail</div>',
           '  </div>',
           '</div>'
         ].join('')
@@ -165,51 +279,14 @@ describe('ScrollSpy', () => {
 
         spyOn(scrollSpy, '_process').and.callThrough()
 
-        scrollSpyEl.addEventListener('scroll', () => {
+        onScrollStop(() => {
           expect(rootEl).toHaveClass('active')
+          expect(scrollSpy._activeTarget).toEqual(fixtureEl.querySelector('[href="#detail"]'))
           expect(scrollSpy._process).toHaveBeenCalled()
           resolve()
-        })
-
-        scrollSpyEl.scrollTop = 350
-      })
-    })
-
-    it('should correctly select middle navigation option when large offset is used', () => {
-      return new Promise(resolve => {
-        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>'
-        ].join('')
-
-        const contentEl = fixtureEl.querySelector('#content')
-        const scrollSpy = new ScrollSpy(contentEl, {
-          target: '#navigation',
-          offset: Manipulator.position(contentEl).top
-        })
-
-        spyOn(scrollSpy, '_process').and.callThrough()
-
-        contentEl.addEventListener('scroll', () => {
-          expect(fixtureEl.querySelector('#one-link')).not.toHaveClass('active')
-          expect(fixtureEl.querySelector('#two-link')).toHaveClass('active')
-          expect(fixtureEl.querySelector('#three-link')).not.toHaveClass('active')
-          expect(scrollSpy._process).toHaveBeenCalled()
-          resolve()
-        })
+        }, scrollSpyEl)
 
-        contentEl.scrollTop = 550
+        scrollTo(scrollSpyEl, 350)
       })
     })
 
@@ -233,21 +310,18 @@ describe('ScrollSpy', () => {
           offset: 0,
           target: '.navbar'
         })
-        const spy = spyOn(scrollSpy, '_process').and.callThrough()
 
         testElementIsActiveAfterScroll({
           elementSelector: '#a-1',
           targetSelector: '#div-1',
           contentEl,
           scrollSpy,
-          spy,
           cb() {
             testElementIsActiveAfterScroll({
               elementSelector: '#a-2',
               targetSelector: '#div-2',
               contentEl,
               scrollSpy,
-              spy,
               cb: resolve
             })
           }
@@ -255,7 +329,7 @@ describe('ScrollSpy', () => {
       })
     })
 
-    it('should add the active class to the correct element (nav markup)', () => {
+    it('should add to nav the active class to the correct element (nav markup)', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [
           '<nav class="navbar">',
@@ -275,21 +349,18 @@ describe('ScrollSpy', () => {
           offset: 0,
           target: '.navbar'
         })
-        const spy = spyOn(scrollSpy, '_process').and.callThrough()
 
         testElementIsActiveAfterScroll({
           elementSelector: '#a-1',
           targetSelector: '#div-1',
           contentEl,
           scrollSpy,
-          spy,
           cb() {
             testElementIsActiveAfterScroll({
               elementSelector: '#a-2',
               targetSelector: '#div-2',
               contentEl,
               scrollSpy,
-              spy,
               cb: resolve
             })
           }
@@ -297,7 +368,7 @@ describe('ScrollSpy', () => {
       })
     })
 
-    it('should add the active class to the correct element (list-group markup)', () => {
+    it('should add to list-group, the active class to the correct element (list-group markup)', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [
           '<nav class="navbar">',
@@ -317,21 +388,18 @@ describe('ScrollSpy', () => {
           offset: 0,
           target: '.navbar'
         })
-        const spy = spyOn(scrollSpy, '_process').and.callThrough()
 
         testElementIsActiveAfterScroll({
           elementSelector: '#a-1',
           targetSelector: '#div-1',
           contentEl,
           scrollSpy,
-          spy,
           cb() {
             testElementIsActiveAfterScroll({
               elementSelector: '#a-2',
               targetSelector: '#div-2',
               contentEl,
               scrollSpy,
-              spy,
               cb: resolve
             })
           }
@@ -351,10 +419,10 @@ describe('ScrollSpy', () => {
           '  </ul>',
           '</nav>',
           '<div id="content" style="height: 200px; overflow-y: auto;">',
-          '  <div id="spacer" style="height: 100px;"></div>',
-          '  <div id="one" style="height: 100px;"></div>',
-          '  <div id="two" style="height: 100px;"></div>',
-          '  <div id="three" style="height: 100px;"></div>',
+          '  <div id="spacer" style="height: 200px;"></div>',
+          '  <div id="one" style="height: 100px;">text</div>',
+          '  <div id="two" style="height: 100px;">text</div>',
+          '  <div id="three" style="height: 100px;">text</div>',
           '  <div id="spacer" style="height: 100px;"></div>',
           '</div>'
         ].join('')
@@ -362,29 +430,24 @@ describe('ScrollSpy', () => {
         const contentEl = fixtureEl.querySelector('#content')
         const scrollSpy = new ScrollSpy(contentEl, {
           target: '#navigation',
-          offset: Manipulator.position(contentEl).top
+          offset: contentEl.offsetTop
         })
         const spy = spyOn(scrollSpy, '_process').and.callThrough()
 
-        let firstTime = true
-
-        contentEl.addEventListener('scroll', () => {
-          const active = fixtureEl.querySelector('.active')
-
+        onScrollStop(() => {
+          const active = () => fixtureEl.querySelector('.active')
           expect(spy).toHaveBeenCalled()
-          spy.calls.reset()
-          if (firstTime) {
-            expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
-            expect(active.getAttribute('id')).toEqual('two-link')
-            firstTime = false
-            contentEl.scrollTop = 0
-          } else {
-            expect(active).toBeNull()
+
+          expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
+          expect(active().getAttribute('id')).toEqual('two-link')
+          onScrollStop(() => {
+            expect(active()).toBeNull()
             resolve()
-          }
-        })
+          }, contentEl)
+          scrollTo(contentEl, 0)
+        }, contentEl)
 
-        contentEl.scrollTop = 201
+        scrollTo(contentEl, 200)
       })
     })
 
@@ -399,43 +462,40 @@ 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="one" style="height: 100px;"></div>',
-          '  <div id="two" style="height: 100px;"></div>',
-          '  <div id="three" style="height: 100px;"></div>',
-          '  <div id="spacer" style="height: 100px;"></div>',
+          '<div id="content" style="height: 150px; overflow-y: auto;">',
+          '  <div id="one" style="height: 100px;">test</div>',
+          '  <div id="two" style="height: 100px;">test</div>',
+          '  <div id="three" style="height: 100px;">test</div>',
+          '  <div id="spacer" style="height: 100px;">test</div>',
           '</div>'
         ].join('')
 
-        const negativeHeight = -10
+        const negativeHeight = 0
         const startOfSectionTwo = 101
         const contentEl = fixtureEl.querySelector('#content')
+        // eslint-disable-next-line no-unused-vars
         const scrollSpy = new ScrollSpy(contentEl, {
           target: '#navigation',
-          offset: contentEl.offsetTop
+          rootMargin: '0px 0px -50%'
         })
-        const spy = spyOn(scrollSpy, '_process').and.callThrough()
 
-        let firstTime = true
+        onScrollStop(() => {
+          const activeId = () => fixtureEl.querySelector('.active').getAttribute('id')
 
-        contentEl.addEventListener('scroll', () => {
-          const active = fixtureEl.querySelector('.active')
+          expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
+          expect(activeId()).toEqual('two-link')
+          scrollTo(contentEl, negativeHeight)
 
-          expect(spy).toHaveBeenCalled()
-          spy.calls.reset()
-          if (firstTime) {
-            expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
-            expect(active.getAttribute('id')).toEqual('two-link')
-            firstTime = false
-            contentEl.scrollTop = negativeHeight
-          } else {
+          onScrollStop(() => {
             expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
-            expect(active.getAttribute('id')).toEqual('one-link')
+            expect(activeId()).toEqual('one-link')
             resolve()
-          }
-        })
+          }, contentEl)
 
-        contentEl.scrollTop = startOfSectionTwo
+          scrollTo(contentEl, 0)
+        }, contentEl)
+
+        scrollTo(contentEl, startOfSectionTwo)
       })
     })
 
@@ -465,46 +525,41 @@ describe('ScrollSpy', () => {
           offset: 0,
           target: '.navbar'
         })
-        const spy = spyOn(scrollSpy, '_process').and.callThrough()
 
+        scrollTo(contentEl, 0)
         testElementIsActiveAfterScroll({
           elementSelector: '#li-100-5',
           targetSelector: '#div-100-5',
-          scrollSpy,
-          spy,
           contentEl,
+          scrollSpy,
           cb() {
-            contentEl.scrollTop = 0
+            scrollTo(contentEl, 0)
             testElementIsActiveAfterScroll({
-              elementSelector: '#li-100-4',
-              targetSelector: '#div-100-4',
-              scrollSpy,
-              spy,
+              elementSelector: '#li-100-2',
+              targetSelector: '#div-100-2',
               contentEl,
+              scrollSpy,
               cb() {
-                contentEl.scrollTop = 0
+                scrollTo(contentEl, 0)
                 testElementIsActiveAfterScroll({
                   elementSelector: '#li-100-3',
                   targetSelector: '#div-100-3',
-                  scrollSpy,
-                  spy,
                   contentEl,
+                  scrollSpy,
                   cb() {
-                    contentEl.scrollTop = 0
+                    scrollTo(contentEl, 0)
                     testElementIsActiveAfterScroll({
                       elementSelector: '#li-100-2',
                       targetSelector: '#div-100-2',
-                      scrollSpy,
-                      spy,
                       contentEl,
+                      scrollSpy,
                       cb() {
-                        contentEl.scrollTop = 0
+                        scrollTo(contentEl, 0)
                         testElementIsActiveAfterScroll({
                           elementSelector: '#li-100-1',
                           targetSelector: '#div-100-1',
-                          scrollSpy,
-                          spy,
                           contentEl,
+                          scrollSpy,
                           cb: resolve
                         })
                       }
@@ -517,116 +572,73 @@ 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'
-      })
+  describe('refresh', () => {
+    it('should disconnect existing observer', () => {
+      fixtureEl.innerHTML = getDummyFixture()
 
-      expect(scrollSpy._offsets[1]).toEqual(Manipulator.offset(targetEl).top)
-      expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.position(targetEl).top)
-    })
+      const el = fixtureEl.querySelector('.content')
+      const scrollSpy = new ScrollSpy(el)
 
-    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('')
+      spyOn(scrollSpy._observer, 'disconnect')
 
-      const contentEl = fixtureEl.querySelector('.content')
-      const targetEl = fixtureEl.querySelector('#div-jsm-2')
-      const scrollSpy = new ScrollSpy(contentEl, {
-        target: '.navbar',
-        offset: 0,
-        method: 'position'
-      })
+      scrollSpy.refresh()
 
-      expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.offset(targetEl).top)
-      expect(scrollSpy._offsets[1]).toEqual(Manipulator.position(targetEl).top)
+      expect(scrollSpy._observer.disconnect).toHaveBeenCalled()
     })
   })
 
   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).toEqual(15)
+      expect(scrollspy._config.rootMargin).toEqual('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
@@ -638,9 +650,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')
@@ -655,9 +667,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
@@ -667,29 +679,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)).toBeNull()
+      fixtureEl.innerHTML = getDummyFixture()
+
+      const div = fixtureEl.querySelector('.content')
+      expect(ScrollSpy.getInstance(div)).toBeNull()
     })
   })
 
   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)
@@ -698,18 +741,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)).toBeNull()
       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)).toBeNull()
       const scrollspy = ScrollSpy.getOrCreateInstance(div, {
@@ -721,9 +764,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
       })
@@ -741,13 +784,119 @@ 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" style="overflow-y: auto"></div>'
+      ].join('')
 
-      const scrollSpyEl = fixtureEl.querySelector('div')
+      const scrollSpyEl = fixtureEl.querySelector('#wrapper')
 
       window.dispatchEvent(createEvent('load'))
 
       expect(ScrollSpy.getInstance(scrollSpyEl)).not.toBeNull()
     })
   })
+
+  describe('SmoothScroll', () => {
+    it('should not enable smoothScroll', () => {
+      fixtureEl.innerHTML = getDummyFixture()
+      const offSpy = spyOn(EventHandler, 'off').and.callThrough()
+      const onSpy = spyOn(EventHandler, 'on').and.callThrough()
+
+      const div = fixtureEl.querySelector('.content')
+      const target = fixtureEl.querySelector('#navBar')
+      // eslint-disable-next-line no-new
+      new ScrollSpy(div, {
+        offset: 1
+      })
+
+      expect(offSpy).not.toHaveBeenCalledWith(target, 'click.bs.scrollspy')
+      expect(onSpy).not.toHaveBeenCalledWith(target, 'click.bs.scrollspy')
+    })
+
+    it('should enable smoothScroll', () => {
+      fixtureEl.innerHTML = getDummyFixture()
+      const offSpy = spyOn(EventHandler, 'off').and.callThrough()
+      const onSpy = spyOn(EventHandler, 'on').and.callThrough()
+
+      const div = fixtureEl.querySelector('.content')
+      const target = fixtureEl.querySelector('#navBar')
+      // eslint-disable-next-line no-new
+      new ScrollSpy(div, {
+        offset: 1,
+        smoothScroll: true
+      })
+
+      expect(offSpy).toHaveBeenCalledWith(target, 'click.bs.scrollspy')
+      expect(onSpy).toHaveBeenCalledWith(target, 'click.bs.scrollspy', '[href]', jasmine.any(Function))
+    })
+
+    it('should not smoothScroll to element if it not handles a scrollspy section', () => {
+      fixtureEl.innerHTML = [
+        '<nav id="navBar" class="navbar">',
+        '  <ul class="nav">',
+        '    <a id="anchor-1" href="#div-jsm-1">div 1</a></li>',
+        '    <a id="anchor-2" href="#foo">div 2</a></li>',
+        '  </ul>',
+        '</nav>',
+        '<div class="content" data-bs-target="#navBar" style="overflow-y: auto">',
+        '  <div id="div-jsm-1">div 1</div>',
+        '</div>'
+      ].join('')
+
+      const div = fixtureEl.querySelector('.content')
+      // eslint-disable-next-line no-new
+      new ScrollSpy(div, {
+        offset: 1,
+        smoothScroll: true
+      })
+
+      const clickSpy = getElementScrollSpy(div)
+
+      fixtureEl.querySelector('#anchor-2').click()
+      expect(clickSpy).not.toHaveBeenCalled()
+    })
+
+    it('should call `scrollTop` if element doesn\'t not support `scrollTo`', () => {
+      fixtureEl.innerHTML = getDummyFixture()
+
+      const div = fixtureEl.querySelector('.content')
+      const link = fixtureEl.querySelector('[href="#div-jsm-1"]')
+      delete div.scrollTo
+      const clickSpy = getElementScrollSpy(div)
+      // eslint-disable-next-line no-new
+      new ScrollSpy(div, {
+        offset: 1,
+        smoothScroll: true
+      })
+
+      link.click()
+      expect(clickSpy).toHaveBeenCalled()
+    })
+
+    it('should smoothScroll to the proper observable element on anchor click', done => {
+      fixtureEl.innerHTML = getDummyFixture()
+
+      const div = fixtureEl.querySelector('.content')
+      const link = fixtureEl.querySelector('[href="#div-jsm-1"]')
+      const observable = fixtureEl.querySelector('#div-jsm-1')
+      const clickSpy = getElementScrollSpy(div)
+      // eslint-disable-next-line no-new
+      new ScrollSpy(div, {
+        offset: 1,
+        smoothScroll: true
+      })
+
+      setTimeout(() => {
+        if (div.scrollTo) {
+          expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop })
+        } else {
+          expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop)
+        }
+
+        done()
+      }, 100)
+      link.click()
+    })
+  })
 })