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