Javascript 如何使滚动条的宽度/高度响应/百分比？

我正在使用Twine，我已经将滚动条的所有内容按照我的需要进行了样式化，除了我需要使水平滚动条的高度响应。 根据本文，您可以将其设置为百分比： 但每当我将滚动条高度设置为某个百分比时，它就会完全消失。 为了检查它是否是麻绳或其他东西，我去了Brave浏览器上的一个网站，将滚动条宽度设置为一个百分比，它就消失了。我去了Chrome上的另一个网站，做了同样的事情，滚动条消失了。 我刚刚添加了以下元素：

body::-webkit-scrollbar {width: 18%;}

看起来，为了使这一点具有响应性，我必须从头构建一个滚动条并使用JavaScript。我找到这篇文章是为了制作一个基本的滚动条，但是我不知道足够的JavaScript使它水平（我基本上不知道任何JavaScript）。

如果有一个与上面类似的例子，可以使用JavaScript制作水平滚动条，或者使用CSS或JavaScript或其他方法使滚动条的宽度/高度响应，我们将不胜感激。

尝试以下方法：

body::-webkit-scrollbar {width: 0.8vw;}

与

%

一样，

vw

是一个相对宽度单位。此单位基于视口的宽度。1vw的值等于视口宽度的1%。例如，如果视口宽度为50厘米，则1vw等于0.5厘米

---

如果有帮助，请告诉我。如果是，请将我的答案标记为已接受。

Hi，你能在codepen/JSFIDLE上分享你的代码或片段吗？除了我所做的之外，没有什么可以添加的了：

body:：-webkit scrollbar{width:18%；}

你可以将这个添加到任何带有垂直滚动条的站点来复制这个问题，%或vh/vw消失滚动条：P。。。。这就是为什么我要代码，因为这一条语句正在消失滚动条可能你在Firefox上，我想它只允许

滚动条宽度：瘦等等。我认为用JavaScript制作自己的滚动条是在Firefox上定制滚动条的唯一方法。这很有帮助！滚动条接受它，尽管基于vh会在手机上造成一些（希望是小的）问题。我认为仍然需要解决的问题是，不能再使用百分比了，而且在某种程度上，这表明存在某种小故障。使用vh对我来说可以接受，但其他人仍然需要JavaScript解决方案。顺便说一句，受你答案的启发，我还尝试了纵横比，它适用于项目中的另一个方面。虽然滚动条没有消失，但它忽略了纵横比，并转到了默认高度。很高兴听到这个消息。：）我在过去很长一段时间里使用了百分比，但不久前我开始使用vw和vh，因为它适用于您的情况（自定义滚动条），也适用于其他一些情况（例如，改变引导的宽度和高度，其中百分比不起作用，但vw和vh起作用）。