滚动条那些事

一、滚动条样式

1. ie8浏览器

名称描述
scrollbar-arrow-color三角箭头的颜色
scrollbar-face-color立体滚动条的颜色(包括箭头部分的背景色)
scrollbar-3dlight-color立体滚动条亮边的颜色
scrollbar-highlight-color滚动条的高亮颜色(左阴影?)
scrollbar-shadow-color立体滚动条阴影的颜色
scrollbar-darkshadow-color立体滚动条外阴影的颜色
scrollbar-track-color立体滚动条背景颜色
scrollbar-base-color滚动条的基色
        出现滚动条的元素{/*三角箭头的颜色*/scrollbar-arrow-color: #fff;/*滚动条滑块按钮的颜色*/scrollbar-face-color: #0099dd;/*滚动条整体颜色*/scrollbar-highlight-color: #0099dd;/*滚动条阴影*/scrollbar-shadow-color: #0099dd;/*滚动条轨道颜色*/scrollbar-track-color: #0066ff;/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/scrollbar-3dlight-color:#0099dd;/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/scrollbar-darkshadow-color: #0099dd;/*滚动条基准颜色*/scrollbar-base-color: #0099dd;}

2. 其他浏览器(参考-风铭大师)

名称描述
::-webkit-scrollbar滚动条整体部分,其中的属性: width,height,background,border等。
::-webkit-scrollbar-button滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece内层轨道,具体区别看下面gif图,需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb滚动条里面可以拖动的那部分。
::-webkit-scrollbar-corner边角,两个滚动条交汇处。
::-webkit-resizer两个滚动条交汇处用于拖动调整元素大小的小控件(基本用不上)
::-webkit-scrollbar {width: 6px; /*纵向滚动条的宽度*/height: 6px; /*横向滚动条的高度*/background-color: #181c32;
}::-webkit-scrollbar-thumb {background-color: #5a76cd;
}

二、滚动条造成页面抖动

1. 造成页面抖动的原因:

当布局用到margin:0 auto;左右水平居中时,且有的页面有滚动条,有的页面没有,这样会造成抖动。

div{width:1200px;margin:0 auto;
}
<body><div></div>
</body>

2. 解决办法(参考1-zh_rey、 参考2-OZCNO、推荐参考3-张鑫旭 ):

(1)一直存在滚动槽overflow-y:scroll;

(2)让页面右边偏移滚动条的宽度那么长margin-left: calc(100vw - 100%);padding-left: calc(100vw - 100%);

  • 1、加在居中定宽主体的父级身上。
  • 2、calc 是CSS3中的计算,IE10+浏览器支持,IE9浏览器基本支持(不能用在background-position上);-
  • 3、100vw 相对于浏览器的 window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度。 于是,calc(100vw - 100%) 就是浏览器滚动条的宽度大小(如果有,如果没有滚动条则是0)!左右都有一个滚动条宽度(或都是0)被占用,主体内容就可以永远居中浏览器啦,从而没有任何跳动!
    在这里插入图片描述
    注意:ie 浏览器有个 offset 偏移量,比较推荐使用 padding-left(能解决部分问题)。
    设置 padding-left ,有时候拉动横向滚条条时,页面的偏移量(这个时候是padding)还是不正确,这时需要做响应式。
@media screen and (min-width: 1240px) {定宽主体 {padding-left: calc(100vw - 100%);}
}

此时,原来定宽主体就不用再写 padding-left: calc(100vw - 100%);,只需要写上面这段响应式就可以了。

(3)兼容写法:

html {overflow-x: hidden;overflow-y: auto;
}
body {width: 100vw;overflow: hidden;padding-left: calc(100vw - 100%);
}

也可以看我之前写的,不过相差不是很大:滚动条造成页面抖动问题


三、滚动条部分留白问题

造成滚动条留白的原因是宽度设置了100%,哪里留白就把那的 width:100% 改为:min-width:100%就好了。


四、让背景图不跟随滚动条滚动

解决办法(参考-站住,别跑):

(1)css:
在设置背景图的元素中设置一条属性: background-attachment:fixed;,兼容IE6;
(2)js:

<script type="text/javascript">var scrollBackground = true;
</script>  

具体效果就看原文吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Javascript高级程序设计第二版第十四章--异常--笔记

chaepter 14 错误异常分享。 其实主要是就是try{}catch(error){} finally{}这个语句的理解。主要一点&#xff1a;finally 在 return 之后 运行。这跟java里边的如出一辙。 比如&#xff1a;try{return1;}catch(error){return2;} finally{return0;}返回 return 0;然后接着就是 …

HTML引入vue.js,在ie浏览器中不显示

因为只有两个页面&#xff0c;所以我没有用 vue-cli 搭框架&#xff0c;直接在 HTML 中引入vue.js 文件。发现其他浏览器都能正常显示&#xff0c;ie 下显示不正常&#xff0c;而且还报错&#xff0c;错误信息如下&#xff1a; 原因&#xff1a; 主要是因为 ie 不支持 ES6 的语…

具有Infinispan的聚集幂等消费者模式

我创建了一个小项目 &#xff0c;该项目展示了如何将JBoss Infinispan与Apache Camel和幂等消费者模式一起使用&#xff0c;以确保消息不会在集群环境中被处理两次。 假设您有一个应用程序&#xff0c;该应用程序必须通过将其部署在多个容器上才能轻松扩展。 但是应用程序必须…

基于 vue 的验证码组件

登录页面有个验证码&#xff0c;暂时没用到后台&#xff0c;在网上找了两个博客&#xff0c;记录一下。 一、直接写&#xff08;参考-UIEngineer&#xff09; 这个样式比较简单&#xff0c;直接在需要验证码的地方添加就行了。如果这个页面比较复杂&#xff0c;用组件会比较好…

在 HTML 中引入 vue.js 写页面

突然说要写两个页面&#xff08;只有两个页面&#xff0c;不是一个完整的项目。。&#xff09;&#xff0c;有点懵&#xff0c;不知道从哪下手&#xff0c;而且只对 vue 熟悉那么一丢丢&#xff0c;其他框架不是很熟悉。但是没办法鸭&#xff0c;只能硬着头皮去做了&#xff01…

Mschart图表制作

首先一次安装这三个 &#xff08;1&#xff09;.Microsoft .NET Framework 3.5 的 Microsoft 图表控件 &#xff08;2&#xff09;.Microsoft .NET Framework 3.5 语言包的 Microsoft 图表控件 &#xff08;3&#xff09;.Microsoft Chart Controls Add-on for Microsoft Visua…

vue打包后,font格式错误

本地测试没有问题&#xff0c;项目打包以后&#xff0c;浏览器打开控制台&#xff0c;提示font格式错误&#xff1a; 把我的双引号给去掉了。。。-^- 不开心。 解决办法&#xff1a; 1. 把 font: 字体粗细 字体大小/行高 "字体样式"; 分开来写。 改成&#xff1a;…

html笔记(四)弹性盒+响应式

大标题小节一、弹性盒1. 标准盒模型和怪异盒模型2. 弹性盒dipalay3. 与display配合使用的其他属性4. 弹性盒的对齐方式5. 弹性盒的默认特性二、响应式布局1. 媒体查询2. 怎样使用媒体查询3. 优缺点以及使用场景4. Meta 标签的定义5. 常见的属性操作三、多列布局四、移动端布局1…

享受Android应用程序的Java技术盛宴

Java™ 语言是 Android 开发人员所选的工具。Android 运行时使用自己的虚拟机Dalvik&#xff0c;这并不是多数程序开发人员使用的普通Java 虚拟机。Dalvik支持Java 编程语言的大部分功能——但并不是全部。在本文中&#xff0c;您将学习高级Java功能及其如何在Android中实现。这…

echarts地图在ie浏览器上不显示

前面是安装及上手教程&#xff0c;参考了彩色泡泡 和 winne雪 的博客。 如果已经写好了&#xff0c;可以直接跳到 问题总结。 1. npm install echarts --save 2. 在 main.js 中 import echarts from echarts; Vue.prototype.$echarts echarts;3. 在页面上 import china fr…

虚拟主机上快速安装kail

官方文档的筛选 【1】Kali Linux是什么? Kali Linux是一个高级渗透测试和安全审计Linux发行版. Kali Linux 特性 Kali是BackTrack Linux完全遵循Debian开发标准的完整重建.全新的目录框架、复查并打包所有工具、还为VCS建立了Git 树. 超过300个渗透测试工具: 复查了BackTrack里…

Java并发教程–线程之间的可见性

当在不同线程之间共享对象的状态时&#xff0c;除了原子性外&#xff0c;其他问题也会发挥作用。 其中之一是可见性。 关键事实是&#xff0c;如果没有同步&#xff0c;则不能保证指令按照它们在源代码中出现的顺序执行。 这不会影响单线程程序中的结果&#xff0c;但是&#…

让element-ui的输入框聚焦的4种方式

方法一、绑定ref 方法二、通过自定义事件中的事件对象 $event&#xff0c;找到input 方法三、使用自定义指令 方法四、使用原生input 方法一、绑定ref——参考yiyueqinghui <el-input v-model"form.name" ref"name"></el-input> this.$refs.n…

控制台打印三角形、菱形

一、 打印三角形 要求&#xff1a; 打印如下类似的三角形 * *** ***** ******* 效果&#xff1a;思路&#xff1a; &#xff08;1&#xff09; 空格每往下一层少一个。 &#xff08;2&#xff09; *是奇数数列&#xff0c;&#xff08;i – 1&#xff09;* 2 1 核心代码&#…

《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

此文是我的出版书籍《React Native 精解与实战》连载分享&#xff0c;此书由机械工业出版社出版&#xff0c;书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战&#xff0c;以及 React Native 与 iOS、Android 平台的混合开发底层原理…

在CloudBees上开发,测试和部署独立应用程序

CloudBees是一个云平台&#xff0c;为您的应用程序提供存储库&#xff0c;CI服务&#xff08;Jenkins&#xff09;和服务器。 因此&#xff0c;您需要开发&#xff0c;测试和部署所有内容。 有很多选项&#xff0c;例如存储库可以是Git或SVN&#xff0c;对于服务器&#xff0c;…

第五次实验

数组和指针 1. 设N个整数有序&#xff08;由小到大&#xff09;存放在一维数组中。编写函数binarySearch(),实现使用二分查找算法在一维数组中 查找特定整数item。如果找到&#xff0c;返回item在数组元素中的下标&#xff1b;如果item不在数组中&#xff0c;则返回-1。 实现方…

《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

此文是我的出版书籍《React Native 精解与实战》连载分享&#xff0c;此书由机械工业出版社出版&#xff0c;书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战&#xff0c;以及 React Native 与 iOS、Android 平台的混合开发底层原理…

React.js 入门与实战课程思维导图

原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了&#xff0c;在这里分享了课程中的思维导图&#xff0c;供大家参考。 原文发表于我的技术博客 此导图为课程中整理的重要知识点以及大纲导图&#xff0c;供大家学…

Webpack 2 视频教程 002 - NodeJS 安装与配置

原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」。 Webpack 作为目前前端开发必备的框架&#xff0c;Webpack 发布了 2.0 版本&#xff0c;此视频就是基于 2.0 的版本讲解的。 这个基本就是目前国内最好的 Webpack 2.0 最好的学习视频了&#xff0c;…