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