Question

我正在为自定义滚动条制作一个云眩光应用程序，我知道对于那些比我更了解java脚本的人来说这很简单，但我无法找到任何教程，无论如何我只是去了它。

我需要在不同的js文件中添加<style>这三个元素。

黑暗：

::-webkit-scrollbar {
    width: 15px
}
::-webkit-scrollbar-track {
    background-color: #232323
}
::-webkit-scrollbar-thumb {
    background-color: #494949
}
::-webkit-scrollbar-corner {
    background-color: black
}

灯：

::-webkit-scrollbar {
    width: 15px
}
::-webkit-scrollbar-track {
    background-color: #ffffff
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.34)
}
::-webkit-scrollbar-corner {
    background-color: black
}

定制

::-webkit-scrollbar {
    width: 15px
}
::-webkit-scrollbar-track {
    background-color: {{options.scrollbarTrackColor}}
}
::-webkit-scrollbar-thumb {
    background-color: {{options.scrollbarThumbColor}}
}
::-webkit-scrollbar-corner {
    background-color: {{options.scrollbarCornerColor}}
}

我试图解释的可能很难理解，所以我会告诉你另一种方式。

我希望能够将这些css位添加到javascript文件中，这样当用户选择一个时，滚动条将更改为用户选择。

Answer 1

您可以使用example app和编辑app.css来完成此操作。您是否希望不对页面上的所有元素重写此样式？如果您想对Cloudflare Apps创建的元素进行限制，您可以执行以下操作：

cloudflare-app[app="example"]::-webkit-scrollbar-track {
    background-color: #232323
}
cloudflare-app[app="example"]::-webkit-scrollbar-thumb {
    background-color: #494949
}
cloudflare-app[app="example"]::-webkit-scrollbar-corner {
    background-color: black
} 
cloudflare-app[app="example"]::-webkit-scrollbar-corner{
  border: 1px solid;
}

请记住，这仅限于特定于webkit浏览器（所以safari，chrome等等。）

Answer 2

啊，我发现你真的想在你的JS文件中添加这样的东西：

const lightStyle = document.createElement('style')
lightStyle.innerHTML = `
      ::-webkit-scrollbar {
      width: 15px
  }
  ::-webkit-scrollbar-track {
      background-color: #ffffff
  }
  ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.34)
  }
  ::-webkit-scrollbar-corner {
      background-color: red
  }
      `
  if(options.style == 'light') 
  document.head.appendChild(lightStyle)

如何为云光晕应用制作深色，浅色和自定义颜色？

2 个答案: