2020-5-5 seo達人
背景
這一個因為滾動條占據(jù)空間引起的bug, 查了一下資料， 最后也解決了，順便研究一下這個屬性， 做一下總結(jié)，分享給大家看看。
正文
昨天， 測試提了個問題， 現(xiàn)象是一個輸入框的聚焦提示偏了， 讓我修一下, 如下圖：
image.png
起初認為是紅框提示位置不對， 就去找代碼看：
<Input
// ...
onFocus={() => setFocusedInputName('guidePrice')}
onBlur={() => setFocusedInputName('')}
/>
<Table
data-focused-column={focusedInputName}
// ...
/>
代碼上沒有什么問題， 不是手動設(shè)置的，而且， 在我和另一個同事， 還有PM的PC上都是OK的：
image.png
初步判斷是，紅框位置結(jié)算有差異， 差異大小大概是17px, 但是這個差異是怎么產(chǎn)生的呢？
就去測試小哥的PC上看， 注意到一個細節(jié)， 在我PC上， 滾動條是懸浮的：
image.png
在他PC上， 滾動條是占空間的：
image.png
在他電腦上， 手動把原本的 overscroll-y: scroll 改成 overscroll-y: overlay 問題就結(jié)局了。
由此判定是： 滾動條占據(jù)空間 引起的bug。
overscroll-y: overlay
CSS屬性 overflow， 定義當(dāng)一個元素的內(nèi)容太大而無法適應(yīng)塊級格式化上下文的時候該做什么。它是 overflow-x 和overflow-y的 簡寫屬性 。
/* 默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外 */
overflow: visible;
/* 內(nèi)容會被修剪，并且其余內(nèi)容不可見 */
overflow: hidden;
/* 內(nèi)容會被修剪，瀏覽器會顯示滾動條以便查看其余內(nèi)容 */
overflow: scroll;
/* 由瀏覽器定奪，如果內(nèi)容被修剪，就會顯示滾動條 */
overflow: auto;
/* 規(guī)定從父元素繼承overflow屬性的值 */
overflow: inherit;
官方描述：
overlay 行為與 auto 相同，但滾動條繪制在內(nèi)容之上而不是占用空間。 僅在基于 WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）瀏覽器中受支持。
表現(xiàn)：
html {
overflow-y: overlay;
}
兼容性
沒有在caniuse上找到這個屬性的兼容性， 也有人提這個問題：
image.png
問題場景以及解決辦法
1. 外部容器的滾動條
這里的外部容器指的是html， 直接加在最外層:
html {
overflow-y: scroll;
}
手動加上這個特性， 不論什么時候都有滾動寬度占據(jù)空間。
缺點： 沒有滾動的時候也會有個滾動條， 不太美觀。
優(yōu)點： 方便， 沒有兼容性的問題。
2. 外部容器絕對定位法
用絕對定位，保證了body的寬度一直保持完整空間：
html {
overflow-y: scroll; // 兼容ie8，不支持:root, vw
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
3. 內(nèi)部容器做兼容
.wrapper {
overflow-y: scroll; // fallback
overflow-y: overlay;
}
總結(jié)
個人推薦還是用 overlay, 然后使用scroll 做為兜底。
內(nèi)容就這么多， 希望對大家有所啟發(fā)。
文章如有錯誤， 請在留言區(qū)指正， 謝謝。
藍藍設(shè)計的小編 http://www.wnxcall.com