CSS3自定义滚动条样式 -webkit-scrollbar
当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。
首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。
滚动条的css样式主要有三部分组成：
::-webkit-scrollbar 定义了滚动条整体的样式；::-webkit-scrollbar-thumb 滑块部分；::-webkit-scrollbar-thumb 轨道部分；
下面以overflow-y:auto;为例（overflow-x:auto同）
html代码：
css代码：
.test{
width: 50px;
height: 200px;
overflow: auto;
float: left;
margin: 5px;
border: none;
}
.scrollbar{
width: 30px;
height: 300px;
margin: 0 auto;
}
.test-1::-webkit-scrollbar {
width: 10px;
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.test-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}效果如下如：
如果要改变滚动条的宽度：在::-webkit-scrollbar中改变即可；如果要改变滚动条滑块的圆角，在::-webkit-scrollbar-thumb 中改变；如果要改轨道的圆角在::-webkit-scrollbar-track中改变；
此外，滚动条的滑块不仅可以填充颜色还可以填充图片如下：
css代码：
.test-5::-webkit-scrollbar {
width: 10px;
height: 1px;
}
.test-5::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #F90;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.test-5::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #EDEDED;
}html代码：
效果如下：
以上就可以做出自己喜欢的滚动条了；
如果文档中会有多个滚动条出现，而且希望所有的滚动条样式是一样的，那么伪元素前面不需要加上class、id、标签名等之类的任何东西。
到此这篇关于CSS自定义滚动条样式案例详解的文章就介绍到这了,更多相关CSS自定义滚动条样式内容请搜索编程学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程学习网！
使用a标签下载文件，浏览器会直接打开解决方案
使用a标签下载文件，浏览器会直接打开解决方案
背景
在使用a标签进行下载文件时，chrome浏览器是会打开支持预览的文件（如txt、json等），而不下载。
一、HTML中的a标签实现点击下载
通常在咱们写项目的时候会遇到上传下载什么的，在上传完文件后会把文件的路径保存到数据库里以便下载，如果想不通过后台直接下载的话，可以把文件路径给a标签的属性href；
点击下载
这样当用户打开浏览器点击链接的时候就会直接下载文件。
但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”；
点击下载
这里download也可以不写任何信息，会自动使用默认文件名。
二、即使使用a标签的download属性，chrome浏览器还是会打开
追查问题原因：
服务器端返回的response中，content-type为text/plain，即数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。chrome浏览器直接打开了该文本，并没有下载。
三、解决方案 解决方案一：使用ajax请求该url，获取到文本内容，手动实现下载。
//html代码：
{
this.downLoad(href);
}}
disabled={href ? false : true}
>
下载执行结果
//js代码：
downLoad = url => {
//后面加上‘&’，防止请求时，url后面添加问号会影响原来的url参数值
let newurl = url + "&";
let fileName = url.slice(url.lastIndexOf("/") + 1, url.indexOf("?"));
let result = '';
fetchGet(newurl, {}, { credentials: "include" }).then(response => {
result = JSON.stringify(response);
var datastr = `data:text/json;charset=utf-8,${result}`;
var downloadAnchorNode = document.createElement("a");
downloadAnchorNode.setAttribute("href", datastr);
downloadAnchorNode.setAttribute("download", fileName + ".json");
downloadAnchorNode.click();
downloadAnchorNode.remove();
});
};
解决方案二：设置Content-Type
chrome浏览器对与txt，json等文件直接打开应该是因为浏览器对这些类型的文件支持阅览，可以设置Content-Type:application/octet-stream来解决此问题，告知浏览器这是一个字节流，浏览器处理字节流的默认方式就是下载。
可以参考这个OSS文档：
可以手动在OSS上设置这个类型，如果是公共读类型的文件也可以直接在链接后面加上，比如：window.open(‘%2Foctet-stream’)
四、扩展：a标签download下载属性无效
跨域会导致download属性失效。可以试试xhr下载方式。
export default function download(url, fileName) {
const x = new XMLHttpRequest()
x.open('GET', url, true)
x.responseType = 'blob'
x.onload = () => {
const url = window.URL.createObjectURL(x.response)
createAndRemove(url, fileName)
}
x.send()
}
function createAndRemove(url, fileName) {
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = fileName;
eleLink.style.display = 'none';
// 下载内容转变成blob地址
eleLink.href = url;
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
}
五、写在最后
对于jar，zip等浏览器不支持预览的文件，使用a标签href+download属性的方法还是不错的。方法二简单方便，适合多种类型文件下载。
