修补1个由于scrollbar占有室内空间致使的bug难题

日期:2021-02-27 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

情况

这1个由于翻转条占有室内空间引发的bug, 查了1下材料, 最终也处理了,顺带科学研究1下这个特性, 做1下总结,共享给大伙儿看看。

文章正文

昨日, 检测提了个难题, 状况是1个键入框的聚焦提醒偏了, 让我修1下, 以下图:

最初觉得是红框提醒部位不对, 就去找编码看:

<Input
  // ...
  onFocus={() => setFocusedInputName('guidePrice')}
  onBlur={() => setFocusedInputName('')}
/>

<Table
  data-focused-column={focusedInputName}
  // ...
/>

编码上沒有甚么难题, 并不是手动式设定的,并且, 在我和另外一个朋友, 也有PM的PC上全是OK的:

基本分辨是,红框部位清算有差别, 差别尺寸大约是17px, 可是这个差别是如何造成的呢?

就去检测小哥的PC上看, 留意到1个细节, 在我PC上, 翻转条是飘浮的:

在他PC上, 翻转条是占室内空间的:

在他电脑上上, 手动式把本来的 overscroll-y: scroll 改为 overscroll-y: overlay 难题就结果了。

由此判断是: 翻转条占有室内空间 引发的bug。

overscroll-y: overlay

CSS特性 overflow, 界定当1个元素的內容太大而没法融入块级文件格式化左右文的情况下该做甚么。它是 overflow-x 和overflow-y的 简写特性 。

/* 默认设置值。內容不容易被修剪,会展现在元素框以外 */
overflow: visible;

/* 內容会被修剪,而且其余內容不能见 */
overflow: hidden;

/* 內容会被修剪,访问器会显示信息翻转条便于查询其余內容 */
overflow: scroll;

/* 由访问器决定,假如內容被修剪,就会显示信息翻转条 */
overflow: auto;

/* 要求从父元素承继overflow特性的值 */
overflow: inherit;

官方叙述:

overlay  个人行为与 auto 同样,但翻转条绘图在內容之上而并不是占有室内空间。 仅在根据 WebKit(比如,Safari)和根据Blink的(比如,ChromeOpera)访问器中受适用。

主要表现:

html {
  overflow-y: overlay;
}

适配性

沒有在caniuse上寻找这个特性的适配性, 也是有人提这个难题:

难题情景和处理方法

1. 外界器皿的翻转条

这里的外界器皿指的是html, 立即加在最外层:

html {
  overflow-y: scroll;
}

手动式再加这个特点, 无论何时都有翻转宽度占有室内空间。

缺陷: 沒有翻转的情况下也会有个翻转条, 不太美观大方。

优势: 便捷, 沒有适配性的难题。

2. 外界器皿肯定精准定位法

用肯定精准定位,确保了body的宽度1直维持详细室内空间:

html {
  overflow-y: scroll; // 适配ie8,不适用:root, vw
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

3. 內部器皿做适配

.wrapper {
    overflow-y: scroll; // fallback
    overflow-y: overlay;
}

总结

本人强烈推荐還是用 overlay, 随后应用scroll 作为兜底。

內容就这么多, 期待对大伙儿有一定的启迪。

文章内容如有不正确, 请在留言区纠正, 感谢。

参照材料

https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

https://github.com/Fyrd/caniuse/issues/4027

到此这篇有关修补1个由于scrollbar占有室内空间致使的bug难题的文章内容就详细介绍到这了,更多有关scrollbar占有室内空间致使bug內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!