在 Polymer 中使用移动滚动条

Question

我正在使用 Polymer 进行演示，当我使用浏览器（Google Chrome 用于桌面）访问应用程序时，滚动条非常难看。

我正在寻找替代滚动条，发现了一个仅使用 CSS 的好示例：

如何在我的核心支架元素中使用这个 CSS？

Answer 1

要以阴影 DOM 中的元素为目标，请在 css 前加上

html /deep/

所以要定位您网站上的所有滚动条（在像 Chrome 这样的 webkit 浏览器中）

  html /deep/ {
    ::-webkit-scrollbar-track {
      background:white;
    }

    ::-webkit-scrollbar {
      width: 7.5px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: lightgrey; //fallback
      background-color: rgba(26, 26, 26, 0.25);
    }
  }

如果您只想定位核心支架，您可以使用

  html /deep/ core-scaffold {
    ::-webkit-scrollbar-track {
      background:white;
    }

    ::-webkit-scrollbar {
      width: 7.5px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: lightgrey; //fallback
      background-color: rgba(26, 26, 26, 0.25);
    }
  }

或在自定义元素的样式标签内（仅设置该元素的样式）

  :host {
    ::-webkit-scrollbar-track {
      background:white;
    }

    ::-webkit-scrollbar {
      width: 7.5px;
    }

    ::-webkit-scrollbar-thumb {
      background-color: lightgrey; //fallback
      background-color: rgba(26, 26, 26, 0.25);
    }
  }

this 答案涵盖了更多关于阴影的内容 DOM 造型

您还可以使用 core-style 聚合物元素

在 Polymer 中使用移动滚动条

Use mobile scrollbar in Polymer

desktop

scrollbar

polymer