ios下滚动条默认显示
研究这个问题的背景：
众所周知，ios下垂直和水平滚动条都是默认不出现，用户滑动时，才显示，滑动结束以后，又隐藏滚动条。
横向滚动条默认隐藏，用户很可能会忽略右侧被隐藏的部分，由于模块的特殊性，让滚动条默认出现是成本的小的处理方案。
因此就有了让滚动条默认出现的需求了
安卓下是默认滚动条出现的，因此不再今天的讨论范围
在研究ios下让滚动条默认出现的过程中遇到几个坑，和大家分享一下
scrollbar基本知识
首先了解一下scrollbar的各个部件
部件名称:
The-webkit-scrollbarfamily of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element: ::-webkit-scrollbaraddresses the background of the bar itself. It is usually covered by the other elements ::-webkit-scrollbar-buttonaddresses the directional buttons on the scrollbar ::-webkit-scrollbar-trackaddresses the empty space “below” the progress bar ::-webkit-scrollbar-track-pieceis the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb) ::-webkit-scrollbar-thumbaddresses the draggable scrolling element that resizes depending on the size of the scrollable element ::-webkit-scrollbar-corneraddresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet ::-webkit-resizeraddresses the draggable resizing handle that appears above thescrollbar-cornerat the bottom corner of some elements
回到主题
实现ios下滚动条默认显示一共有两个地方需要注意的
1、横向滚动条需要设置高度（纵向滚动条需要设置宽度）
在设置了::-webkit-scrollbar-thumb以及::-webkit-scrollbar-track-piece的背景颜色情况下，如果不设置::-webkit-scrollbar宽度（高度），滚动条是不会出现的
2、-webkit-overflow-scrolling: touch;属性让ios默认不显示滚动条
-webkit-overflow-scrolling属性是定义是否使用回弹效果；默认值是auto;当-webkit-overflow-scrolling设置为touch时，ios会有回弹效果，但是，此时对于滚动条设置的所有样式就会失效，浏览器会使用系统默认的样式以及默认滚动条不显示
总结：
1、滚动条也是可以设置hover和active的
2、单独设置横向（纵向）滚动条样式时需要添加:horizontal（:vertical）
3、::-webkit-scrollbar-track-piece可以设置滚动前与滚动后的轨道样式（:decrement，:increment）
DEMO：
<!DOCTYPE html>
<html>
<head>
<title>练小习的前端技术笔记</title>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
<style>
*{
padding:0;
margin:0;
}
.test{
padding: 10px;
margin: 20px;
box-sizing: border-box;
font-size: 12px;
resize: none;
-webkit-overflow-scrolling: auto;
height: 300px;
width:500px;
overflow-x: scroll;
overflow-y: hidden;
padding: 0
}
.test > div{
width: 310px;
white-space: nowrap;
}
::-webkit-scrollbar{
width: 3px;
height: 3px;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: #a6a6a6;
border-radius: 3px;
}
::-webkit-scrollbar-track-piece:horizontal:decrement,
::-webkit-scrollbar-track-piece:horizontal:increment {
background-color: rgba(166, 166, 166, 0.2);
}
</style>
</head>
<body>
<div class="test">
<div>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
</div>
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。