問題描述

在玩了一段時(shí)間 position:sticky 之后，我開始為粘性導(dǎo)航實(shí)現(xiàn)它，并遇到了這個(gè)有趣但令人沮喪的滾動(dòng)彈跳問題.

After playing with position: sticky for a while, I started implementing it for sticky navigation and ran into this interesting, but frustrating scroll bouncing issue.

這是在許多網(wǎng)站上常見的導(dǎo)航行為類型，您通常會(huì)使用 javascript 來計(jì)算頁面中相對元素的偏移量.當(dāng)元素到達(dá)窗口頂部時(shí)，將添加一個(gè) 'stuck' 類，使用 position: fixed 將該元素從文檔流中取出，并添加一個(gè)相同高度的虛擬元素在它的地方，以防止頁面跳躍".此外，通常會(huì)看到 javascript 然后縮小導(dǎo)航的高度以在滾動(dòng)時(shí)節(jié)省空間.

This is a common type of navigation behaviour seen on many sites, where you would traditionally use javascript to calculate offsets to a relative element in the page. When the element reaches the top of the window, a 'stuck' class would be added, taking the element out of the document flow with position: fixed, and a dummy element of the same height would be added in it's place to prevent the page from 'jumping'. Additionally, it's common to see javascript then shrink the height of that navigation to save space while scrolling.

CSS 現(xiàn)在似乎用 position:sticky 處理了所有這些，除了(據(jù)我所知)檢測元素何時(shí)卡住".相反，我使用一些 javascript 來進(jìn)行卡住檢測，發(fā)現(xiàn)一切正常，直到 粘性元素的高度需要更改.

CSS now seemingly takes care of all this with position: sticky, apart from (as far as I can tell), detecting when the element is 'stuck'. Instead I used some javascript to do the stuck detection, discovering that everything works great, right up until the height of the sticky element needs to change.

這很難解釋，但它會(huì)在生產(chǎn)中造成嚴(yán)重破壞 - 所以這里有一個(gè)簡化的示例，以盡可能簡單地說明這個(gè)問題.

It's pretty hard to explain, but it wreaks havoc in production - so here's a stripped down example I've made to illustrate the issue as simply as possible.

CSS 粘貼位置高度調(diào)整錯(cuò)誤

當(dāng)頁面的高度恰到好處的長度時(shí)最好說明，所以我在元素上設(shè)置了一個(gè)固定的高度，以確保每個(gè)人都能看到相同的東西.您可以添加更多內(nèi)容，但滾動(dòng)過去時(shí)仍然存在問題.

It's best illustrated when the height of the page is just the right length, so I've set a fixed height on the element to make sure everyone is able to see the same thing. You can add more content and it's still an issue when scrolling past.

結(jié)果是一些非常奇怪的行為.向下滾動(dòng)時(shí)，導(dǎo)航卡住，當(dāng)它縮小導(dǎo)航欄時(shí)，瀏覽器會(huì)自動(dòng)創(chuàng)建由 position:sticky 提供的虛擬元素"，似乎保持同步用它.這意味著，當(dāng)添加卡住的類時(shí)，整個(gè)頁面變小，幾分之一秒后，導(dǎo)航不再卡住，從而導(dǎo)致故障振動(dòng)循環(huán).

The result is some really weird behaviour. When scrolling down, the navigation sticks, and as it shrinks the navbar, the 'dummy element' the browser is automatically creating courtesy of position: sticky seems to be kept in sync with it. That means, when the stuck class is added, the whole page gets smaller, and a fraction of a second later, the navigation is no longer stuck, thus resulting in a glitchy vibration loop.

我測試過的每個(gè)瀏覽器的行為也完全不同.在 chrome 中，這種彈跳永遠(yuǎn)無法解決，它一直處于無限循環(huán)中，不斷添加/刪除卡住的類.更有趣的是，在 Safari 中，滾動(dòng)位置被推回"到不會(huì)出錯(cuò)的狀態(tài).然后在 Firefox 中，它會(huì)同時(shí)執(zhí)行這兩項(xiàng)操作，會(huì)出現(xiàn)一兩秒鐘的故障，然后再次強(qiáng)制滾動(dòng)位置恢復(fù).

The behaviour is also completely different across every browser I've tested. In chrome, this bouncing can never be resolved, it stays in the infinite loop constantly adding / removing the stuck class. More interestingly in Safari, the scroll position is 'pushed back' to a state where it wont bug out. Then in Firefox, it does both of these, glitching for a second or two, before forcing the scroll position back up again.

我想知道是否有人遇到過這種情況并提出任何解決方案?我想出的任何 js 解決方法都沒有真正奏效或非常好！當(dāng)然，隨著人氣的增長，更多的人會(huì)喜歡這個(gè)......

I'm wondering if anyone has experienced this, and come up with any solutions? Any js workaround I've come up with hasn't really worked or been very good! Surely as popularity grows, more people are going to hit this one...

歡迎天才的變通方法、技巧、見解或完美的解決方案！

Genius workarounds, hacks, insights, or perfect solutions all welcome!

推薦答案

在應(yīng)用會(huì)改變其大小(并可能影響窗口大小)的更改時(shí)，嘗試將 overflow-anchor: none; 添加到粘性元素/元素定位).

Try adding overflow-anchor: none; to the sticky element when applying changes that would alter its size (and potentially affect window size/element positioning).

更新:最終，我找到的正確解決方案是:擁有一個(gè)永遠(yuǎn)不會(huì)改變大小的外部元素(它在任何給定斷點(diǎn)處始終保持相同的全高).那個(gè)是粘的.但它也應(yīng)該沒有背景/視覺樣式，并且它的有效高度應(yīng)該由高度 + 底部邊距定義(這樣它就可以在文檔中占用適量的初始空間，但實(shí)際上不會(huì)在視覺導(dǎo)航后阻止點(diǎn)擊縮小并提供更多空間.

Update: ultimately, the right solution I've hit on is: have an outer element that NEVER changes size (it's always the same full height at any given breakpoint). That one is made sticky. But it also should have no background/visual styles, and it's effective height should be defined by height + bottom margin (so that it takes up the right amount of initial space in the document, but doesn't actually block clicks once the visual nav shrinks and gives more space.

然后有一個(gè)內(nèi)部元素會(huì)改變大小，無論是在現(xiàn)實(shí)中還是在視覺上.

Then have an inner element that does change size, either in reality or just visually.

您還可以使用現(xiàn)代屬性，例如包含:布局大小；像

You can also use modern properties like contain: layout size; on the inner element like

這篇關(guān)于位置:粘性 - 結(jié)合 javascript 高度調(diào)整時(shí)滾動(dòng)彈跳的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！