浏览器滚动条的默认样式比较丑,有些情况下,又不能直接overflow:hidden掉。

本文阐述如何通过 document.styleSheets[0].insertRule 简单的实现pc端和移动端对浏览器样式的操作。

css部分

::-webkit-scrollbar-track {
background-color: #fff;
} /* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
} /* 滑块颜色 */

js部分

mounted(){
this.$nextTick(function(){
//通过UA修改滚动条的样式
if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
document.styleSheets[0].insertRule("::-webkit-scrollbar{height:3px}", 0);
}else{
document.styleSheets[0].insertRule("::-webkit-scrollbar{height:0px}", 0);
}
});
},

如果没有使用vue,直接引用nextTick中 if...else.. 的部分即可。需要注意的是在vue环境下,此段代码需要写在mounted这个生命周期内,如果写在updated周期,会添加多次,且在chrome中,无非正常显示滚动条。

通过UA判断,对滚动条样式进行不同的操作的更多相关文章

  1. 关于Angular+ngx-perfect-scrollbar自定义各大浏览器滚动条样式的解决方法

    资料: http://manos.malihu.gr/jquery-custom-content-scroller/  (此项是结合Jquery使用的,在此并未采用) https://www.npmj ...

  2. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  3. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

  4. CSS自定义滚动条样式

    原文地址:http://www.qianduan.net/css-custom-scroll-bar-style/ 相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器 ...

  5. jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

  6. 【CSS3】自定义滚动条样式 -webkit-scrollbar

    好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...

  7. CSS3自定义滚动条样式 之 -webkit-scrollbar

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  8. 自定义滚动条样式 -webkit-scrollbar

    demo .page-one-content-area-inner-select-wrap height 200px margin-bottom 30px overflow auto &::- ...

  9. HTML div 滚动条样式设计

    ::-webkit-scrollbar-track-piece{ background-color:#fff;/*滚动条的背景颜色*/ -webkit-border-radius:0;/*滚动条的圆角 ...

随机推荐

  1. 北大POJ题库使用指南

    原文地址:北大POJ题库使用指南 北大ACM题分类主流算法: 1.搜索 //回溯 2.DP(动态规划)//记忆化搜索 3.贪心 4.图论 //最短路径.最小生成树.网络流 5.数论 //组合数学(排列 ...

  2. Elasticsearch-搜索推荐

    对于es中搜索推荐的功能的实现: 1.使用match_phrase_prefix来实现search-time搜索推荐,原理根match_phrase类似,唯一的区别是把最后一个term作为前缀去搜索, ...

  3. ubuntu16.04配置java环境(重启后不会失效)

    ubuntu16.04配置java环境(重启后不会失效) 1.jdk的安装包(.tar.gz)拷贝到/opt目录下 mv jdk-8u144-linux-x64.tar.gz /opt 2.解压文件 ...

  4. cobbler 自定义私有yum源

    目的:为客户端自动添加上yum源 以下以openstack源为例 1.新建私有yum源[root@localhost ~]#cobbler repo add --name=openstack-mita ...

  5. 53.storm简介

    一.简介 1.storm是twitter开源的一个分布式的实时计算系统,用于数据实时分析,持续计算,分布式RPC等等. 官网地址:http://storm-project.net 源码地址:https ...

  6. #阿里云#云服务器搭建git服务器

    前言:大家都知道,git是非常方便的版本控制工具,目前网上有很多免费的git仓库可以给我们使用,但是有些时候我们并不放心将我们的项目寄放在别人的服务器上,这个时候就需要自己搭建一个git服务器,十分的 ...

  7. (转)Python标准库:内置函数print(*objects, sep=' ', end='\n', file=sys.stdout, flush=False)

    原文:https://blog.csdn.net/caimouse/article/details/44133241 https://www.cnblogs.com/owasp/p/5372476.h ...

  8. jQuery中的100个技巧(译)

    1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. <sc ...

  9. android动态权限获取

    android动态权限获取 Android6.0采用新的权限模型,只有在需要权限的时候,才告知用户是否授权,是在runtime时候授权,而不是在原来安装的时候 ,同时默认情况下每次在运行时打开页面时候 ...

  10. java aop做一个接口耗时的计算

    看代码: @Aspect @Component public class TimeCostAspect { private static Logger logger = LoggerFactory.g ...