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>
This commit is contained in:
GeoSot
GitHub
parent
cfd2f3f778
commit
ece1601227
|
|
@ -34,7 +34,7 @@
|
|||
},
|
||||
{
|
||||
"path": "./dist/js/bootstrap.bundle.js",
|
||||
"maxSize": "42.5 kB"
|
||||
"maxSize": "42.75 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/bootstrap.bundle.min.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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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._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._scrollHeight = 0
|
||||
|
||||
EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process())
|
||||
|
||||
this.refresh()
|
||||
this._process()
|
||||
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()
|
||||
this._initializeTargetsAndObservables()
|
||||
this._maybeEnableSmoothScroll()
|
||||
|
||||
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 (this._observer) {
|
||||
this._observer.disconnect()
|
||||
} else {
|
||||
this._observer = this._getNewObserver()
|
||||
}
|
||||
|
||||
if (!target) {
|
||||
return null
|
||||
}
|
||||
|
||||
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])
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
_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)
|
||||
}
|
||||
|
||||
_maybeEnableSmoothScroll() {
|
||||
if (!this._config.smoothScroll) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
|
||||
this._activeTarget = null
|
||||
this._clear()
|
||||
return
|
||||
}
|
||||
// unregister any previous listeners
|
||||
EventHandler.off(this._config.target, EVENT_CLICK)
|
||||
|
||||
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])
|
||||
|
||||
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)
|
||||
|
||||
link.classList.add(CLASS_NAME_ACTIVE)
|
||||
if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
|
||||
SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, link.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)
|
||||
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
|
||||
}
|
||||
|
||||
// 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)
|
||||
}
|
||||
}
|
||||
// Chrome 60 doesn't support `scrollTo`
|
||||
root.scrollTop = height
|
||||
}
|
||||
}
|
||||
|
||||
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))
|
||||
_getNewObserver() {
|
||||
const options = {
|
||||
root: this._rootElement,
|
||||
threshold: [0.1, 0.5, 1],
|
||||
rootMargin: this._getRootMargin()
|
||||
}
|
||||
|
||||
return new IntersectionObserver(entries => this._observerCallback(entries), options)
|
||||
}
|
||||
|
||||
// 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))
|
||||
}
|
||||
|
||||
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))
|
||||
|
||||
continue
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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 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)
|
||||
|
||||
// ensure that the observableSection exists & is visible
|
||||
if (isVisible(observableSection)) {
|
||||
this._targetLinks.set(anchor.hash, anchor)
|
||||
this._observableSections.set(anchor.hash, observableSection)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_process(target) {
|
||||
if (this._activeTarget === target) {
|
||||
return
|
||||
}
|
||||
|
||||
this._clearActiveClass(this._config.target)
|
||||
this._activeTarget = target
|
||||
target.classList.add(CLASS_NAME_ACTIVE)
|
||||
this._activateParents(target)
|
||||
|
||||
EventHandler.trigger(this._element, EVENT_ACTIVATE, { relatedTarget: target })
|
||||
}
|
||||
|
||||
_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)
|
||||
return
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_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)
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 element = fixtureEl.querySelector(elementSelector)
|
||||
const target = fixtureEl.querySelector(targetSelector)
|
||||
const getElementScrollSpy = element => element.scrollTo ?
|
||||
spyOn(element, 'scrollTo').and.callThrough() :
|
||||
spyOnProperty(element, 'scrollTop', 'set').and.callThrough()
|
||||
|
||||
// add top padding to fix Chrome on Android failures
|
||||
const paddingTop = 5
|
||||
const scrollHeight = Math.ceil(contentEl.scrollTop + Manipulator.position(target).top) + paddingTop
|
||||
const scrollTo = (el, height) => {
|
||||
el.scrollTop = height
|
||||
}
|
||||
|
||||
function listener() {
|
||||
expect(element).toHaveClass('active')
|
||||
contentEl.removeEventListener('scroll', listener)
|
||||
expect(scrollSpy._process).toHaveBeenCalled()
|
||||
spy.calls.reset()
|
||||
cb()
|
||||
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)
|
||||
}
|
||||
|
||||
contentEl.addEventListener('scroll', listener)
|
||||
contentEl.scrollTop = scrollHeight
|
||||
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 = 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
|
||||
}
|
||||
|
||||
expect(element).toHaveClass('active')
|
||||
expect(scrollSpy._activeTarget).toEqual(element)
|
||||
expect(event.relatedTarget).toEqual(element)
|
||||
cb()
|
||||
})
|
||||
|
||||
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)
|
||||
|
||||
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()
|
||||
})
|
||||
|
||||
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()
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
|
||||
contentEl.scrollTop = 201
|
||||
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
||||
expect(active().getAttribute('id')).toEqual('two-link')
|
||||
onScrollStop(() => {
|
||||
expect(active()).toBeNull()
|
||||
resolve()
|
||||
}, contentEl)
|
||||
scrollTo(contentEl, 0)
|
||||
}, contentEl)
|
||||
|
||||
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) {
|
||||
onScrollStop(() => {
|
||||
expect(fixtureEl.querySelectorAll('.active')).toHaveSize(1)
|
||||
expect(active.getAttribute('id')).toEqual('two-link')
|
||||
firstTime = false
|
||||
contentEl.scrollTop = negativeHeight
|
||||
} else {
|
||||
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('')
|
||||
describe('refresh', () => {
|
||||
it('should disconnect existing observer', () => {
|
||||
fixtureEl.innerHTML = getDummyFixture()
|
||||
|
||||
const contentEl = fixtureEl.querySelector('.content')
|
||||
const targetEl = fixtureEl.querySelector('#div-jsm-2')
|
||||
const scrollSpy = new ScrollSpy(contentEl, {
|
||||
target: '.navbar',
|
||||
offset: 0,
|
||||
method: 'offset'
|
||||
})
|
||||
const el = fixtureEl.querySelector('.content')
|
||||
const scrollSpy = new ScrollSpy(el)
|
||||
|
||||
expect(scrollSpy._offsets[1]).toEqual(Manipulator.offset(targetEl).top)
|
||||
expect(scrollSpy._offsets[1]).not.toEqual(Manipulator.position(targetEl).top)
|
||||
})
|
||||
spyOn(scrollSpy._observer, 'disconnect')
|
||||
|
||||
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('')
|
||||
scrollSpy.refresh()
|
||||
|
||||
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)
|
||||
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()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -256,18 +256,32 @@
|
|||
|
||||
// Scrollspy demo on fixed height div
|
||||
.scrollspy-example {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
margin-top: .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.scrollspy-example-2 {
|
||||
position: relative;
|
||||
height: 350px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.simple-list-example-scrollspy {
|
||||
a {
|
||||
padding: .25rem;
|
||||
margin: .5rem 0;
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($bd-purple, .65);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bd-example-border-utils {
|
||||
[class^="border"] {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,7 @@ toc: true
|
|||
|
||||
## How it works
|
||||
|
||||
Scrollspy has a few requirements to function properly:
|
||||
|
||||
- It must be used on a Bootstrap [nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}).
|
||||
- Scrollspy requires `position: relative;` on the element you're spying on, usually the `<body>`.
|
||||
- Anchors (`<a>`) are required and must point to an element with that `id`.
|
||||
|
||||
When successfully implemented, your nav or list group will update accordingly, moving the `.active` class from one item to the next based on their associated targets.
|
||||
Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the element with the `id` referenced by the anchor's `href` is scrolled into view. Generally, it will be most useful in conjunction with a Bootstrap [nav component]({{< docsref "/components/navs-tabs" >}}) or [list group]({{< docsref "/components/list-group" >}}), but it will also work with any anchor elements in the current page.
|
||||
|
||||
{{< callout >}}
|
||||
### Scrollable containers and keyboard access
|
||||
|
|
@ -47,7 +41,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
|
|||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
|
|
@ -82,7 +76,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
|
|||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>...</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
|
|
@ -122,20 +116,34 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
|
|||
</div>
|
||||
<div class="col-8">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
|
||||
<h4 id="item-1">Item 1</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h5 id="item-1-1">Item 1-1</h5>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h5 id="item-1-2">Item 1-2</h5>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="item-2">Item 2</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="item-3">Item 3</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h5 id="item-3-1">Item 3-1</h5>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<div id="item-1">
|
||||
<h4>Item 1</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
<div id="item-1-1">
|
||||
<h5>Item 1-1</h5>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
<div id="item-1-2">
|
||||
<h5>Item 1-2</h5>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
<div id="item-2">
|
||||
<h4>Item 2</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
<div id="item-3">
|
||||
<h4>Item 3</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
<div id="item-3-1">
|
||||
<h5>Item 3-1</h5>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
<div id="item-3-2">
|
||||
<h5>Item 3-2</h5>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -225,17 +233,62 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
|
|||
</div>
|
||||
```
|
||||
|
||||
## Example with simple anchors
|
||||
|
||||
Scrollspy is not limited to nav components and list groups, but will work on any `<a>` anchor elements in the current document. Scroll the area and watch the `.active` class change.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div id="simple-list-example" class="d-flex flex-column simple-list-example-scrollspy text-center">
|
||||
<a href="#simple-list-item-1">Item 1</a>
|
||||
<a href="#simple-list-item-2">Item 2</a>
|
||||
<a href="#simple-list-item-3">Item 3</a>
|
||||
<a href="#simple-list-item-4">Item 4</a>
|
||||
<a href="#simple-list-item-5">Item 5</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
|
||||
<h4 id="simple-list-item-1">Item 1</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="simple-list-item-2">Item 2</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="simple-list-item-3">Item 3</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="simple-list-item-4">Item 4</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="simple-list-item-5">Item 5</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div id="list-example" class="d-flex flex-column">
|
||||
<a href="#item-1">Item 1</a>
|
||||
<a href="#item-2">Item 2</a>
|
||||
<a href="#item-3">Item 3</a>
|
||||
<a href="#item-4">Item 4</a>
|
||||
</div>
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
|
||||
<h4 id="item-1">Item 1</h4>
|
||||
<p>...</p>
|
||||
<h4 id="item-2">Item 2</h4>
|
||||
<p>...</p>
|
||||
<h4 id="item-3">Item 3</h4>
|
||||
<p>...</p>
|
||||
<h4 id="item-4">Item 4</h4>
|
||||
<p>...</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Via data attributes
|
||||
|
||||
To easily add scrollspy behavior to your topbar navigation, add `data-bs-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-bs-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component.
|
||||
|
||||
```css
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
```
|
||||
To easily add scrollspy behavior to your topbar navigation, add `data-bs-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-bs-target` attribute with the `id` or class name of the parent element of any Bootstrap `.nav` component.
|
||||
|
||||
```html
|
||||
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
|
||||
|
|
@ -251,8 +304,6 @@ body {
|
|||
|
||||
### Via JavaScript
|
||||
|
||||
After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
|
||||
|
||||
```js
|
||||
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
|
||||
target: '#navbar-example'
|
||||
|
|
@ -260,38 +311,45 @@ var scrollSpy = new bootstrap.ScrollSpy(document.body, {
|
|||
```
|
||||
|
||||
{{< callout danger >}}
|
||||
#### Resolvable ID targets required
|
||||
#### Requires resolvable `id` targets
|
||||
|
||||
Navbar links must have resolvable id targets. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`.
|
||||
Links must have resolvable `id` targets, otherwise they are being ignored. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout info >}}
|
||||
#### Non-visible target elements ignored
|
||||
#### Non-visible target elements are ignored
|
||||
|
||||
Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.
|
||||
{{< /callout >}}
|
||||
|
||||
### Options
|
||||
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`.
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-root-margin=""`.
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `offset` | number | `10` | Pixels to offset from top when calculating position of scroll. |
|
||||
| `method` | string | `auto` | Finds which section the spied element is in. `auto` will choose the best method to get scroll coordinates. `offset` will use the [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) method to get scroll coordinates. `position` will use the [`HTMLElement.offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) and [`HTMLElement.offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft) properties to get scroll coordinates.` |
|
||||
| `target` | string, jQuery object, DOM element | | Specifies element to apply Scrollspy plugin. |
|
||||
| `rootMargin` | string | `0px 0px -40%` | Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position. |
|
||||
| `smoothScroll` | boolean | `false` | Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables. |
|
||||
| `target` | string \| jQuery object \| DOM element | | Specifies element to apply Scrollspy plugin. |
|
||||
{{< /bs-table >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
**Deprecated Options**
|
||||
|
||||
Up until v5.1.3 we were using `offset` & `method` options, which are now deprecated and replaced by `rootMargin`.
|
||||
To keep backwards compatibility, we will continue to parse a given `offset` to `rootMargin`, but this feature will be removed in **v6**.
|
||||
{{< /callout >}}
|
||||
|
||||
### Methods
|
||||
|
||||
{{< bs-table "table" >}}
|
||||
| Method | Description |
|
||||
| --- | --- |
|
||||
| `refresh` | When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method. |
|
||||
| `refresh` | When adding or removing elements in the DOM, you'll need to call the refresh method. |
|
||||
| `dispose` | Destroys an element's scrollspy. (Removes stored data on the DOM element) |
|
||||
| `getInstance` | *Static* method which allows, to get the scrollspy instance associated with a DOM element |
|
||||
| `getOrCreateInstance` | *Static* method which allows, to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn't initialized. |
|
||||
| `getInstance` | *Static* method to get the scrollspy instance associated with a DOM element |
|
||||
| `getOrCreateInstance` | *Static* method to get the scrollspy instance associated with a DOM element, or to create a new one in case it wasn't initialized. |
|
||||
{{< /bs-table >}}
|
||||
|
||||
Here's an example using the refresh method:
|
||||
|
|
@ -309,7 +367,7 @@ dataSpyList.forEach(function (dataSpyEl) {
|
|||
{{< bs-table "table" >}}
|
||||
| Event | Description |
|
||||
| --- | --- |
|
||||
| `activate.bs.scrollspy` | This event fires on the scroll element whenever a new item becomes activated by the scrollspy. |
|
||||
| `activate.bs.scrollspy` | This event fires on the scroll element whenever an anchor is activated by the scrollspy. |
|
||||
{{< /bs-table >}}
|
||||
|
||||
```js
|
||||
|
|
|
|||
Loading…
Reference in New Issue