electron禁用滚动条、自定义滚动条样式

本文转载自：https://newsn.net/

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

electron 如何禁用滚动条？滚动条如何定义样式？

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

本文测试环境：mac。

禁用滚动条

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

<body scroll='no'>

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

<body>

electron 如何禁用滚动条？滚动条如何定义样式？

自定义滚动条

那么如何自定义滚动条的样式呢？这个就是纯正的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中，需要自定义滚动条的情况，也不会太多。大多数情况下，需求都是隐藏滚动条。

总结

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

以上是 electron禁用滚动条、自定义滚动条样式 的全部内容， 来源链接： utcz.com/a/118947.html

回到顶部