Skip to content

Commit 01c4f50

Browse files
authored
fix tab position in viewport (#284)
Updates the tab scroll to take the elements position before and after all the tabs have been switched so that the difference can be used for the `scrollTo`. The `scrollTo` behavior changes to instant, because we are effectively masking the fact that the tab position would move without a scrollTo, and we are moving it back to where it was before the tab was clicked.
1 parent e4e0b21 commit 01c4f50

File tree

2 files changed

+28
-28
lines changed

2 files changed

+28
-28
lines changed

src/js/06-code.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,16 @@ document.addEventListener('DOMContentLoaded', function () {
256256
var switchTab = function (e) {
257257
var tab = e.target
258258
var title = tab.innerHTML
259+
260+
var toolbarOffset = 0
261+
var toolbar = document.querySelector('.toolbar')
262+
if (toolbar.offsetHeight) {
263+
toolbarOffset = toolbar.offsetHeight
264+
}
265+
var offset = document.querySelector('.navbar').offsetHeight + toolbarOffset + 20
266+
var topOfWindowPosition = window.scrollY + offset
267+
var topOfTabPosition = tab.getBoundingClientRect().top + window.scrollY
268+
259269
// Switch Tabs
260270
var targetTabs = document.querySelectorAll('.tabbed-target[data-title="' + title + '"]')
261271
targetTabs.forEach(function (target) {
@@ -277,22 +287,12 @@ document.addEventListener('DOMContentLoaded', function () {
277287
})
278288
})
279289

280-
var toolbarOffset = 0
281-
var toolbar = document.querySelector('.toolbar')
282-
if (toolbar.offsetHeight) {
283-
toolbarOffset = toolbar.offsetHeight
284-
}
285-
var offset = document.querySelector('.navbar').offsetHeight + toolbarOffset + 20
286-
287-
var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
288-
var bodyRect = document.body.getBoundingClientRect().top
289-
var elementRect = tab.getBoundingClientRect().top
290-
var elementPosition = elementRect - bodyRect
291-
var offsetPosition = elementPosition - offset - vh / 5
290+
var newTopOfTabPosition = tab.getBoundingClientRect().top + window.scrollY
291+
var shift = topOfTabPosition - newTopOfTabPosition
292292

293293
window.scrollTo({
294-
top: offsetPosition, // center clicked tab to a fifth of viewport height
295-
behavior: 'smooth',
294+
top: topOfWindowPosition - shift - offset, // scroll back to the same position before the click
295+
behavior: 'instant', // instantly so nothing is visible to the user
296296
})
297297
}
298298

src/js/08-tabs-block.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,16 @@ document.addEventListener('DOMContentLoaded', function () {
4242
var tab = e.target
4343
var lang = tab.dataset.lang
4444
var title = tab.dataset.title
45+
46+
var toolbarOffset = 0
47+
var toolbar = document.querySelector('.toolbar')
48+
if (toolbar.offsetHeight) {
49+
toolbarOffset = toolbar.offsetHeight
50+
}
51+
var offset = document.querySelector('.navbar').offsetHeight + toolbarOffset + 20
52+
var topOfWindowPosition = window.scrollY + offset
53+
var topOfTabPosition = tab.getBoundingClientRect().top + window.scrollY
54+
4555
// Switch Tabs
4656
var targetTabs = document.querySelectorAll('.tabbed-target[data-title="' + title + '"]')
4757
targetTabs.forEach(function (target) {
@@ -63,22 +73,12 @@ document.addEventListener('DOMContentLoaded', function () {
6373
})
6474
})
6575

66-
var toolbarOffset = 0
67-
var toolbar = document.querySelector('.toolbar')
68-
if (toolbar.offsetHeight) {
69-
toolbarOffset = toolbar.offsetHeight
70-
}
71-
var offset = document.querySelector('.navbar').offsetHeight + toolbarOffset + 20
72-
73-
var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
74-
var bodyRect = document.body.getBoundingClientRect().top
75-
var elementRect = tab.getBoundingClientRect().top
76-
var elementPosition = elementRect - bodyRect
77-
var offsetPosition = elementPosition - offset - vh / 5
76+
var newTopOfTabPosition = tab.getBoundingClientRect().top + window.scrollY
77+
var shift = topOfTabPosition - newTopOfTabPosition
7878

7979
window.scrollTo({
80-
top: offsetPosition, // center clicked tab to a fifth of viewport height
81-
behavior: 'smooth',
80+
top: topOfWindowPosition - shift - offset, // scroll back to the same position before the click
81+
behavior: 'instant', // instantly so nothing is visible to the user
8282
})
8383

8484
if (sessionStorageAvailable) {

0 commit comments

Comments
 (0)