CSS3 Calc实现滚动条出现页面不跳动问题


Posted in HTML / CSS onSeptember 14, 2017

什么是calc()?

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

语法

calc() = calc(四则运算)

例如:

.elm {
  width: calc(expression);
}

其中"expression"是一个表达式,用来计算长度的表达式

说明

用于动态计算长度值。

  • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
  • 任何长度值都可以使用calc()函数进行计算;
  • calc()函数支持 "+", "-", "*", "/" 运算;
  • calc()函数使用标准的数学运算优先级规则;

兼容性

CSS3 Calc实现滚动条出现页面不跳动问题

简单的例子:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函数_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
    width: calc(100% - 50px);
    background: #eee;
}
</style>
</head>
<body>
<div class="test">我的宽度为100% - 50px</div>
</body>
</html>

下面就来讲解下最常用的这个:实现滚动条出现页面不跳动的应用

当页面内容动态加载,开始没有滚动条,内容增多后出现滚动条,这时使用固定宽度居中对齐布局会向左偏移一个滚动条宽度。解决方法可以给内容全部添加overflow-y:scroll;或者是根据内容用css填充好再补充内容。本文介绍的是calc来计算滚动条宽度,当有滚动条时,内容外部也给它模拟一个滚动条宽度,因而就不会偏移了。·

很简单,只要一行代码就搞定了:

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者:

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

首先,.wrap-outer指的是居中定宽主体的父级,如果没有,创建一个(使用主体也是可以实现类似效果,不过本着宽度分离原则,不推荐);

然后,calc是css3中的计算,IE10+浏览器支持,IE9浏览器基本支持(不能用在background-position上);

最后,100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度。

于是,calc(100vw - 100%)就是浏览器滚动条的宽度大小(如果有,如果没有滚动条则是0)!左右都有一个滚动条宽度(或都是0)被占用,主体内容就可以永远居中浏览器啦,从而没有任何跳动!

总结

以上所述是小编给大家介绍的CSS3 Calc实现滚动条出现页面不跳动问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 #HTML / CSS
用css3写出气球样式的示例代码
Sep 11 #HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 #HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 #HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 #HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 #HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 #HTML / CSS
You might like
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
简单介绍python封装的基本知识
2019/08/10 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
应届生财务管理求职信
2013/11/06 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
python中print格式化输出的问题
2021/04/16 Python
Go Plugins插件的实现方式
2021/08/07 Golang
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL