浏览器滚动条设置与自定义及移动端滚动出现的坑

webkit的滚动条，一般采用iscroller 插件解决。但是，我觉得没有必要。用自己原生的就好。

但是，如果是系统原生的滚动（什么都不加，自然滚动——一般在html活着body层级滚动。基本没有什么问题。但是自定义的滚动，android一般会卡顿。

设置 -webkit-overflow-scrolling: touch;意味着touch触发滚动

但是，如果设置了touch-action: none;就会发现完全滚动不了

觉得这里有必要科普下touch-action的属性

auto 当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平滑、缩放等。

none 当触控事件发生在元素上时，不进行任何操作。

pan-x 启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。

pan-y 启用单指垂直平移手势。可以与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。

manipulation 浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。 这是“pan-x pan-y pinch-zoom”（为了兼容性本身仍然有效）的别名。

pan-left, pan-right,pan-up,pan-down  启用以指定方向滚动开始的单指手势。 一旦滚动开始，方向可能仍然相反。 请注意，滚动“向上”（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样 pan-left 表示用户将其手指向右拖动。 多个方向可以组合，除非有更简单的表示（例如，“pan-left pan-right”无效，因为“pan-x”更简单，而“pan-left pan-down”有效）。

pinch-zoom 启用多手指平移和缩放页面。 这可以与任何平移值组合

在PC上面，可以修改滚动条的属性，自定义滚动条

简单地修改一下几项，就可以看到效果了： 

::-webkit-scrollbar{width:12px; height:12px;} /*滚动条垂直方向的宽度与水平方向的高度*/ 
::-webkit-scrollbar-button{} /*滚动条按钮*/ 
::-webkit-scrollbar-track{} /*滚动条轨道*/ 
::-webkit-scrollbar-track-piece:vertical{} /*滚动条垂直方向轨道件*/ 
::-webkit-scrollbar-track-piece:horizontal{} /*滚动条水平方向轨道件*/ 
::-webkit-scrollbar-thumb{} /*滚动条轨道上的按钮*/ 
::-webkit-scrollbar-corner{} /*滚动条轨道上的滚动角*/ 

要求不是很高的话，自定义以上选项已经足够了。 
简单编辑了一下，做了这么个效果： 

但是，在移动端，是无效的。这些如果有的话，可以移除

转载本站文章《浏览器滚动条设置与自定义及移动端滚动出现的坑》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/css3/2015_1208_352.html