网络工具包滚动条中的文本

您可以样式化滚动条：

https://css-tricks.com/almanac/properties/s/scrollbar/

您可以使用 css 添加内容：

https://css-tricks.com/css-content/

你能把文本放在那个滚动条里吗？就像堆叠在一起的字母，就像书脊上的书名？

无法使用本机滚动条，因为它们不正确HTML元素和浏览器轮流不允许以可用性和可访问性的名义设置它们的样式。但完全可以使用滚动条插件。
我个人最喜欢的(出于多种原因(：simplebar.

window.SimpleBar = new SimpleBar(document.querySelector('[data-scrollbar]'),{ autoHide: false });
window.onresize = function() {
  window.SimpleBar.recalculate();
}

body {
  padding: 0;margin:0;
  overflow: hidden;
}
body>[data-scrollbar] {
  height: 100vh;
  width: 100vw;
}
body>[data-scrollbar] .spacer {
  height: 200vh;
}
body>[data-scrollbar] .simplebar-track.vertical::before {
  position: absolute;
  content: 'scrollbar';
  width: 1px;
  word-break: break-all;
  top: 50%;
  transform: translateY(-50%);
  z-index:3
}

<link rel="stylesheet" href="https://unpkg.com/simplebar@2.0.3/umd/simplebar.css" />
<script src="https://unpkg.com/simplebar@2.0.3/umd/simplebar.js"></script>
<body>
  <div data-scrollbar>
    <div class="spacer"></div>
  </div>
</body>

我选择了一个笨拙的::before元素来显示文本。您可以继续添加适当的html结构，将每个字母包装在span中，并使用flexbox将它们分发/居中。

如果您希望将文本应用于滚动条药丸而不是轨道，则必须替换此行

body>[data-scrollbar] .simplebar-track.vertical::before {

跟

body>[data-scrollbar] .simplebar-track.vertical .simplebar-scrollbar::before {

在上面的脚本中。使用插件文档和CSS自定义其外观。

相关内容

最新更新

热门标签：