在html中创建自定义水平滚动条[关闭]答案

【问题标题】：Create custom horizontal scroll bar in html [closed]在html中创建自定义水平滚动条[关闭]
【发布时间】：2021-11-26 13:55:44
【问题描述】：

我想在 HTML 中创建一个自定义滚动条而不滚动任何数据。我想允许用户通过移动滚动条在文本框中设置值。我还需要使用 javascript 或 jquery 完成的滚动量，以便我可以在文本框中显示适当的值。我已经链接了一个 gif，其中滚动条在没有数据的情况下移动（我已经在 pygame 中完成了），但是有什么方法可以做到这一点https://i.stack.imgur.com/6oDCz.gif（示例）。如果有任何标签或任何简单的工具可以实现这一点，请给出一个想法。鼓励对此提供任何帮助

【问题讨论】：

标签： javascript html jquery css scrollbar

【解决方案1】：

::-webkit-scrollbar

这是您要查找的选择器，现在您只需在 css 中编辑即可。

【讨论】：

我想在自定义位置添加它，这不能用 ::-webkit-scrollbar 完成，因为它位于页面的四个边缘之一有没有办法添加水平滑动条
绝对定位，相对定位..
我只想有一个滑动条，这样我就可以获得用户滚动的值，我不希望滚动条覆盖页面

【解决方案2】：

您正在寻找范围输入： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

纯 HTML 示例：

<div>
  <input type="range" id="volume" name="volume" min="0" max="11">
  <label for="volume">Volume</label>
</div>

如果你不介意使用 js 插件： https://rangeslider.js.org/

【讨论】：