[分享]css3手机显示滚动条

CSS3是CSS的最新版本，它为我们提供了许多新的功能。在PC端，我们可以轻松地显示一个滚动条，但是在移动设备上，对于长页面的滚动条的处理就有些棘手了。不用担心，CSS3为我们提供了一种解决方案，我们...

CSS3是CSS的最新版本，它为我们提供了许多新的功能。在PC端，我们可以轻松地显示一个滚动条，但是在移动设备上，对于长页面的滚动条的处理就有些棘手了。不用担心，CSS3为我们提供了一种解决方案，我们可以轻松地在移动设备的浏览器中显示一个自定义的滚动条。

首先，我们需要为滚动条创建一个样式，如下所示：

::-webkit-scrollbar {
  width: 5px;
}
 
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
 
::-webkit-scrollbar-thumb {
  background: #888;
}
 
::-webkit-scrollbar-thumb:hover {
  background: #555;
} 

通过::-webkit-scrollbar选择器，我们可以为滚动条设置样式，例如宽度、背景颜色等。其中，::-webkit-scrollbar-thumb用于设置滚动条的滑块部分，我们可以设置其背景颜色、悬浮颜色等。

接下来，我们需要将这个样式应用于我们的页面上。

body {
  overflow-y: scroll;
}
 
body::-webkit-scrollbar {
  width: 5px;
}
 
body::-webkit-scrollbar-track {
  background: #f1f1f1;
}
 
body::-webkit-scrollbar-thumb {
  background: #888;
}
 
body::-webkit-scrollbar-thumb:hover {
  background: #555;
} 

这样，我们就可以在移动设备的浏览器中显示一个自定义的滚动条了。需要注意的是，::-webkit-scrollbar样式只对WebKit内核的浏览器有效，因此其在某些浏览器中可能无法正常工作。

总之，CSS3为移动设备浏览器中显示滚动条提供了一种创新的解决方案，我们可以轻松地为页面添加自定义的滚动条样式。