0

我正在为自定义滚动条制作一个云耀斑应用程序，我知道对于比我更了解 java 脚本的人来说，我要问的内容很简单，但无论如何我都找不到任何教程，我只会去做。

我需要<style>在不同的 js 文件中添加一个包含这 3 个东西的元素。

黑暗的：

::-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 文件中，以便当用户选择一个时，滚动条将更改为用户的选择。

4

2 回答 2

0

啊，我看到你实际上想在你的 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)
于 2018-05-10T16:53:05.503 回答
0

您可以通过使用示例应用程序并编辑 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 等）

于 2018-04-30T21:15:23.197 回答