浏览器滚动条优化

GitCafe 发布于2019-08-30 15:44 / 1595人阅读

摘要：系统中火狐浏览器滚动条很粗，且颜色在很多场景很辣眼睛，并不适用，现提供以下几种方式，对滚动条进行优化直接隐藏法体验最差火狐谷歌引用第三方插件有弊端相关插件推荐自带的，但是没有在文档中写出由于引用第三方插件后，在中浏览器自动又

windows系统中火狐浏览器滚动条很粗，且颜色在很多场景很辣眼睛，并不适用，现提供以下几种方式，对滚动条进行优化：

1.直接隐藏法（体验最差）

// 火狐64+
scroll-width: none

// 谷歌
::-webkit-scrollbar {
display: none
}

2.引用第三方插件（有弊端）

相关插件推荐
el-scrollbar（element自带的，但是没有在文档中写出）
vue-scroll
vue-happy-scroll
better-scroll
由于引用第三方插件后，在mac中浏览器自动又添加了优化的滚动条，会重叠，看起来不是很友好

3.css自带（最方便好用）

主要针对火狐64+

scrollbar-width: thin; // 滚动条窄形式
scrollbar-color: #5A5B5C transparent; // 滚动条颜色 背景颜色

样式看起来也还不错

超融合服务器服务器托管 html滚动条优化滚动条 js滚动条滚动动画网页滚动条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116188.html

窗口进度条及其高级使用

摘要：效果优化一下因为这里的窗口滚动进度条没有过度效果吗虽然谷歌浏览器她会自动帮你优化一点过度的效果，但是我们还是自己写的和谐一点点，所以就加多一句的动画到这里我们的滚动进度条就基本上实现了，也可以做一个很不错的水平效果。我们大概实现的效果就像YouTube上面的红色进度条那样。但是YouTube上面那个进度条还是很坑爹的。文章后面再告诉你们为什么。首先窗口的滚动进度条窗口的滚动条非常...

objc94 2019-08-22 10:48 评论0 收藏0
今天，你的浏览器 “滚动” 了吗？

摘要：今天，你的浏览器滚动了吗序在页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。今天，你的浏览器滚动了吗？序在 Web 页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。而应对溢出，隐藏或者滚动是最常见的处理方式。滚动，作为 FEers 最经常...

leo108 2019-08-21 11:51 评论0 收藏0
今天，你的浏览器 “滚动” 了吗？

摘要：今天，你的浏览器滚动了吗序在页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。今天，你的浏览器滚动了吗？序在 Web 页面中，一个有高度或者宽度的容器是最常见的构成元素，而在其中的子元素有很大的概率超过父容器的尺寸限制，我们称之为溢出。而应对溢出，隐藏或者滚动是最常见的处理方式。滚动，作为 FEers 最经常...

ad6623 2019-08-29 13:09 评论0 收藏0
水平居中布局与滚动条跳动的千年难题

摘要：于是，问题来了，信息流页面，如新浪微博，是从上往下渲染的。，结构类似几个页面通过头部的水平导航刷新切换，结果有的页面有滚动条，有的没有。绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~例如，妇女之友大淘宝的首页： .warp{ width:1190px; margin:0 auto; position:relativ...

nifhlheimr 2019-08-05 14:24 评论0 收藏0
水平居中布局与滚动条跳动的千年难题

摘要：于是，问题来了，信息流页面，如新浪微博，是从上往下渲染的。，结构类似几个页面通过头部的水平导航刷新切换，结果有的页面有滚动条，有的没有。绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~例如，妇女之友大淘宝的首页： .warp{ width:1190px; margin:0 auto; position:relativ...

songjz 2019-07-01 10:20 评论0 收藏0