本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。

本期的主题是:electron的滚动条。electron作为一个模拟客户端的软件,其滚动条按理来说,是不应该出现的。那么本文的主要内容,就从两个维度上展开:第一,禁用滚动条。第二,自定义滚动条样式。

苏南大叔:electron 如何禁用滚动条?滚动条如何定义样式? - electron-scrollbar
electron 如何禁用滚动条?滚动条如何定义样式?(图3-1)

需要特别说明的是:本文中的内容,不仅仅适用于electron,任何网页类型的使用场景都是适用的。

本文测试环境:macelectron@3.x

禁用滚动条

在传统的网页技术领域,这个问题的解决方案是:

<body scroll='no'>

但是,上述代码在最新的浏览器中,已经不生效了。目前最新的解决方案是:

<body style="overflow:hidden">

苏南大叔:electron 如何禁用滚动条?滚动条如何定义样式? - electron-scrollbar-overflow-hidden
electron 如何禁用滚动条?滚动条如何定义样式?(图3-2)

自定义滚动条

那么如何自定义滚动条的样式呢?这个就是纯正的css的概念了,苏南大叔的博客,就是最好的例子。相关的css代码是:

  ::-webkit-scrollbar{width:8px;height:4px}
  ::-webkit-scrollbar-button{width:8px;height:0}
  ::-webkit-scrollbar-track{background:0 0}
  ::-webkit-scrollbar-thumb{background:#61a8df;-webkit-transition:.3s;transition:.3s}
  ::-webkit-scrollbar-thumb:hover{background-color:#37dace}
  ::-webkit-scrollbar-thumb:active{background-color:#17bbaf}

效果如下:

苏南大叔:electron 如何禁用滚动条?滚动条如何定义样式? - electron-scrollbar-diy
electron 如何禁用滚动条?滚动条如何定义样式?(图3-3)

鉴于篇幅限制,这里就不详细说明各个参数了。大家可以随便试一试,就明白了。在electron中,需要自定义滚动条的情况,也不会太多。大多数情况下,需求都是隐藏滚动条。

总结

electron与滚动条的事情,暂时就写这么多了。不排除后续有补充说明滚动条参数的相关文字。

如果想知道更多有关electron经验的话,请点击下面的链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。