怎样配置H5的滚动条样式的代码-

这篇文章主要介绍了配置H5的滚动条样式的示例代码的相干材料，内容挺不错的，此刻分享给大家，也给大家做个参照 。 这篇文章主要介绍了配置H5的滚动条样式的示例代码的相干材料，内容挺不错的，此刻分享给大家，也给大家做个参照 。

本文介绍了配置H5的滚动条样式的示例代码，分享给大家，概括如下：

/* 滚动条的滑轨配景色彩 */
::-webkit-scrollbar-track {
    background-color: #b46868;
}

/* 滑块色彩 */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
} 

/* 滑轨两头的监听按钮色彩 */
::-webkit-scrollbar-button {
    background-color: #7c2929;
}

/* 横向滚动条和纵向滚动条订交处尖角的色彩 */
::-webkit-scrollbar-corner {
    background-color: black;
} 

// IE 本人的设定办法，而且是首先个可以自定义滚动条的阅读器，从IE5.5开端兼容
body {
    scrollbar-face-color: #b46868;
}
举例
/* Document scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}


    

      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
      Iure id exercitationem nulla qui repellat laborum vitae, 
      molestias tempora velit natus. Quas, assumenda nisi. 
      Quisquam enim qui iure, consequatur velit sit?
    

以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相干内容请关注百分百源码网！