本期的主题是: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经验的话,请点击下面的链接:

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

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章:

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!