如何使用输入类型=范围自定义滚动条

【问题标题】：How to custom scrollbars using input type=range如何使用输入类型=范围自定义滚动条
【发布时间】：2021-09-14 02:42:17
【问题描述】：

有没有办法通过使用 input type=range 来自定义滚动条？

我知道有一种方法可以通过 webkit 滚动条自定义滚动条，但我也希望它可以在 firefox 上运行。

到目前为止，我拥有的是这个

https://codepen.io/sir-j/pen/NWggGde

我基本上将我的$(window).scrollTop() 与范围的值相关联。

这个问题是我的浏览器可以在我改变范围时上下滚动，但是当我上下滚动时我不能改变输入范围。

有人知道吗？

【问题讨论】：

这里有scroll event。
@SebastianSimon 我如何改变输入范围的值呢？请检查我的代码笔

标签： javascript html jquery css

【解决方案1】：

尝试使用滚动事件和 window.scrollY 来获取滚动值

附：这是具有两种方式绑定的代码，您必须只同步它：

var i = document.querySelector('input')

i.addEventListener('input', function () {
  const num = parseNum(i.value);
  document.getElementById('thescrolling2').innerHTML =  num;
  $(window).scrollTop(num);
})

window.addEventListener('scroll', function(e) {
  i.value = parseNum(window.scrollY);
  windowScrollTop = $(window).scrollTop();
  document.getElementById('thescrolling1').innerHTML = parseNum(windowScrollTop);
}, false);

function parseNum(v) {
  return Number(v).toFixed(2);
}

scroll event

【讨论】：

我如何改变范围输入的值呢？
谢谢！那行得通。但是先使用 window.addEventListener('scroll') 和先使用 i.addEventListener('input') 有什么区别呢？