Skip to content

Commit

Permalink
Avoid autoscroll when changing tab in tabbed example. (#226)
Browse files Browse the repository at this point in the history
I think it's a bad UX if the page moves unexpectedly. When looking at
examples, people may want to look at them together with the text leading
to it, and they have to manually scroll back up to.
  • Loading branch information
stefano-ottolenghi committed Apr 30, 2024
1 parent 0e6b4c6 commit 1259ce4
Show file tree
Hide file tree
Showing 2 changed files with 0 additions and 34 deletions.
17 changes: 0 additions & 17 deletions src/js/06-code.js
Original file line number Diff line number Diff line change
Expand Up @@ -283,23 +283,6 @@ document.addEventListener('DOMContentLoaded', function () {
el.classList.add(tabActive)
})
})

var toolbarOffset = 0
var toolbar = document.querySelector('.toolbar')
if (toolbar.offsetHeight) {
toolbarOffset = toolbar.offsetHeight
}
var offset = document.querySelector('.navbar').offsetHeight + toolbarOffset + 20

var bodyRect = document.body.getBoundingClientRect().top
var elementRect = tab.getBoundingClientRect().top
var elementPosition = elementRect - bodyRect
var offsetPosition = elementPosition - offset

window.scrollTo({
top: offsetPosition,
behavior: 'smooth',
})
}

// Tabbed code
Expand Down
17 changes: 0 additions & 17 deletions src/js/08-tabs-block.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,23 +63,6 @@ document.addEventListener('DOMContentLoaded', function () {
})
})

var toolbarOffset = 0
var toolbar = document.querySelector('.toolbar')
if (toolbar.offsetHeight) {
toolbarOffset = toolbar.offsetHeight
}
var offset = document.querySelector('.navbar').offsetHeight + toolbarOffset + 20

var bodyRect = document.body.getBoundingClientRect().top
var elementRect = tab.getBoundingClientRect().top
var elementPosition = elementRect - bodyRect
var offsetPosition = elementPosition - offset

window.scrollTo({
top: offsetPosition,
behavior: 'smooth',
})

if (sessionStorageAvailable) {
window.sessionStorage.setItem('code_example_language', lang)
}
Expand Down

0 comments on commit 1259ce4

Please sign in to comment.