html 占用空间 滚动轴_滚动条占据空间scrollbar导致的bug
背景
这一个因为滚动条占据空间引起的bug, 查了一下资料, 最后也解决了,顺便研究一下这个属性, 做一下总结,分享给大家看看。
正文
昨天, 测试提了个问题, 现象是一个输入框的聚焦提示偏了, 让我修一下, 如下图:
起初认为是红框提示位置不对, 就去找代码看:
// ...
onFocus={() => setFocusedInputName('guidePrice')}
onBlur={() => setFocusedInputName('')}
/>
data-focused-column={focusedInputName}
// ...
/>
代码上没有什么问题, 不是手动设置的,而且, 在我和另一个同事, 还有PM的PC上都是OK的:
初步判断是,红框位置结算有差异, 差异大小大概是17px, 但是这个差异是怎么产生的呢?
就去测试小哥的PC上看, 注意到一个细节, 在我PC上, 滚动条是悬浮的:
在他PC上, 滚动条是占空间的:
在他电脑上, 手动把原本的 overscroll-y: scroll 改成 overscroll-y: overlay 问题就结局了。
由此判定是: 滚动条占据空间 引起的bug。
overscroll-y: overlay
/* 默认值。内容不会被修剪,会呈现在元素框之外 */
overflow: visible;
/* 内容会被修剪,并且其余内容不可见 */
overflow: hidden;
/* 内容会被修剪,浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
/* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */
overflow: auto;
/* 规定从父元素继承overflow属性的值 */
overflow: inherit;
官方描述:
表现:
html {
overflow-y: overlay;
}
兼容性
没有在caniuse上找到这个属性的兼容性, 也有人提这个问题:
问题场景以及解决办法
1. 外部容器的滚动条
这里的外部容器指的是html, 直接加在最外层:
html {
overflow-y: scroll;
}
手动加上这个特性, 不论什么时候都有滚动宽度占据空间。
缺点: 没有滚动的时候也会有个滚动条, 不太美观。
优点: 方便, 没有兼容性的问题。
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. 内部容器做兼容
.wrapper {
overflow-y: scroll; // fallback
overflow-y: overlay;
}
总结
个人推荐还是用 overlay, 然后使用scroll 做为兜底。
内容就这么多, 希望对大家有所启发。
文章如有错误, 请在留言区指正, 谢谢。
参考资料
https://developer.mozilla.org…
https://github.com/Fyrd/caniu…
html 占用空间 滚动轴_滚动条占据空间scrollbar导致的bug相关推荐
- html 占用空间 滚动轴_滚动轴承润滑及密封,轧机轴承技术(104)
阅读本文前,您可先点击上面的蓝色字体"云轧钢","关注"后您就可以第一时间收到最优质的文章了. 添加小编微信(13585097569)把您想学的知识留言小编,小 ...
- 浏览器y轴滚动条占据宽度,导致出现x轴滚动条的解决方案
当开发的网页出现y轴滚动条时,而你某个最外层元素的宽度用的是width: 100vw:或者width: 100%;时,这时候网页就会出现x轴的滚动条,但这个x轴滚动条是不需要的,且很难看.x轴滚动条出 ...
- jquery滚动条滚动事件_滚动条和jQuery –使用航点的事件处理
jquery滚动条滚动事件 How to handle scrolling with jQuery. Today we continue jQuery reviews, and our article ...
- html 占用空间 滚动轴_html – 缩放子级上的溢出滚动:X和Y轴上的不同行为
>有一个固定大小的容器,包含一个固定大小的儿童. >有溢出滚动. >然后,我通过转换缩小孩子,将其大小减半. > X滚动消失,因为子宽度为200px(更具体地说,容器的scro ...
- css如何设置x轴为滚动,解决移动端页面出现 X轴横向滚动条问题
最近在用 Bootstrap 写一个需要适配 WEB 和 WAP 的网站,写完后发现 WAP 端总是会出现横向滚动条,也就是 X 轴滚动条,导致 WAP 端页面左右滑来滑去,很是令人蛋疼,即使设置了 ...
- echarts 添加滚动轴
需求:解决x轴数据过多导致页面拥挤 解决:添加滚动轴 dataZoom dataZoom:[{ //y轴固定,让内容滚动type: 'slider',xAxisIndex: [0],show:true ...
- 小程序scroll设置(滚动轴样式、真机测试不能滑动)
一.先说scroll真机测试不能滑动的问题 1.我做的项目是公司的一个小程序商城.产品是个妹子,UI+产品+运营,反正啥都会,尤其是提需求.要不是因为她比我重,我早就打她了.我本来已经做好了一个点击购 ...
- html上div加滑轮,css如何实现给div添加滚动并隐藏滚动条
css 给div添加滚动并隐藏滚动条 ,具体代码如下所示: 在html中 下面内容会单独滚动 1111111111111111 222222222222222 333333333333333 4444 ...
- qt qml scrollbar 移动APP风格的滚动轴
依附于Flickable组件的滚动轴 自动放置在恰当位置 拖动时显示,不动时消失 Lisence: MIT 请保留此声明 Author: surfsky.cnblogs.com 201 ...
最新文章
- 访问SharePoint站点时,提示:Service Unavailable
- 实验二简化版C语言中文理解程序文法
- Android消息队列图片记录
- java 写文件filewriter_使用FileWriter写文件
- 【原型设计】第四节:Axure RP9 交面交互的使用说明 01 打开链接交互效果
- 从零开始学前端:jQuery官网 --- 今天你学习了吗?(CSS:Day26)
- 大数据之-Hadoop源码编译_源码编译的意义---大数据之hadoop工作笔记0044
- [HNOI2008]越狱
- gdb 查看是否 栈溢出_[原理分析]Linux下的栈溢出案例分析-GDB调试操练[1]
- 5个python小游戏,python学习放松
- 【图算法】(3) 网络的基本静态几何特征(二),附networkx完整代码
- 在Ubuntu 8.10 中安装使用新一代输入法ibus Deb包下载
- Ceph监控部署之inkscopeCalamari(v10.2.11)
- 在数据库中如何新增一个字段?
- linux转化大小写,linux转换大小写
- LU分解Matlab算法分析
- 响应式网页教程_如何响应式思考:响应式网页设计教程
- 巴纳姆效应心理 学对号入座 营销中惯用的营销心理学
- Qt vs2010开发环境搭建
- win7 生成jar包