root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

fix: set element to active after a smooth scroll

This commit is contained in:
Guilherme Soares 2025-01-24 15:36:58 +00:00 committed by Mark Otto
parent 0b1556ffd5
commit cef7e253e4
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/src/scrollspy.js
View File

@ -69,6 +69,9 @@ class ScrollSpy extends BaseComponent {
this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element this._rootElement = getComputedStyle(this._element).overflowY === 'visible' ? null : this._element
this._activeTarget = null this._activeTarget = null
this._observer = null this._observer = null
// Sometimes scrolling to the section isn't enough to trigger a observation callback.
// Scroll to up to 2px to make sure it triggers.
this._scrollOffset = 2
this.refresh() // initialize this.refresh() // initialize
} }
@ -132,7 +135,8 @@ class ScrollSpy extends BaseComponent {
if (observableSection) { if (observableSection) {
event.preventDefault() event.preventDefault()
const root = this._rootElement || window const root = this._rootElement || window
const height = observableSection.offsetTop - this._element.offsetTop
const height = observableSection.offsetTop - this._element.offsetTop - this._scrollOffset
if (root.scrollTo) { if (root.scrollTo) {
root.scrollTo({ top: height, behavior: scrollBehavior }) root.scrollTo({ top: height, behavior: scrollBehavior })
return return

24
js/tests/unit/scrollspy.spec.js
View File

@ -858,9 +858,9 @@ describe('ScrollSpy', () => {
setTimeout(() => { setTimeout(() => {
if (div.scrollTo) { if (div.scrollTo) {
expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop, behavior: 'auto' }) expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop - scrollSpy._scrollOffset, behavior: 'auto' })
} else { } else {
expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop) expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop - scrollSpy._scrollOffset)
} }
done() done()
@ -883,9 +883,9 @@ describe('ScrollSpy', () => {
setTimeout(() => { setTimeout(() => {
if (div.scrollTo) { if (div.scrollTo) {
expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop, behavior: 'smooth' }) expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop - scrollSpy._scrollOffset, behavior: 'smooth' })
} else { } else {
expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop) expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop - scrollSpy._scrollOffset)
} }
done() done()
@ -943,17 +943,17 @@ describe('ScrollSpy', () => {
const link = fixtureEl.querySelector('[href="#div-jsm-1"]') const link = fixtureEl.querySelector('[href="#div-jsm-1"]')
const observable = fixtureEl.querySelector('#div-jsm-1') const observable = fixtureEl.querySelector('#div-jsm-1')
const clickSpy = getElementScrollSpy(div) const clickSpy = getElementScrollSpy(div)
// eslint-disable-next-line no-new
new ScrollSpy(div, { const scrollSpy = new ScrollSpy(div, {
offset: 1, offset: 1,
smoothScroll: true smoothScroll: true
}) })
setTimeout(() => { setTimeout(() => {
if (div.scrollTo) { if (div.scrollTo) {
expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop, behavior: 'smooth' }) expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop - scrollSpy._scrollOffset, behavior: 'smooth' })
} else { } else {
expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop) expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop - scrollSpy._scrollOffset)
} }
done() done()
@ -977,17 +977,17 @@ describe('ScrollSpy', () => {
const link = fixtureEl.querySelector('[href="#présentation"]') const link = fixtureEl.querySelector('[href="#présentation"]')
const observable = fixtureEl.querySelector('#présentation') const observable = fixtureEl.querySelector('#présentation')
const clickSpy = getElementScrollSpy(div) const clickSpy = getElementScrollSpy(div)
// eslint-disable-next-line no-new
new ScrollSpy(div, { const scrollSpy = new ScrollSpy(div, {
offset: 1, offset: 1,
smoothScroll: true smoothScroll: true
}) })
setTimeout(() => { setTimeout(() => {
if (div.scrollTo) { if (div.scrollTo) {
expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop, behavior: 'smooth' }) expect(clickSpy).toHaveBeenCalledWith({ top: observable.offsetTop - div.offsetTop - scrollSpy._scrollOffset, behavior: 'smooth' })
} else { } else {
expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop) expect(clickSpy).toHaveBeenCalledWith(observable.offsetTop - div.offsetTop - scrollSpy._scrollOffset)
} }
done() done()