我做了一个自定义滚动条，唯一的问题是，每当我放大或缩小（Ctrl +鼠标滚轮），宽度（宽度：10 px）的变化，因为它是在像素。如果我将其更改为宽度：1vw，然后它与缩放工作正常，但在窗口调整大小，它再次改变。
制作宽度：1vh，也改变滚动条的大小时，调整窗口的垂直。
那么，如何使这个滚动条的大小是固定的，独立于缩放/窗口大小调整？
CSS代码
#scroll-bar {
position: fixed;
width: 1vh;
height: 100%;
top: 0;
right: 0;
background: black;
}Javascript代码
<script>
let bar = document.getElementById('scroll-bar');
let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function () {
let bar_height = (window.pageYOffset/totalHeight)*100;
bar.style.height = bar_height+'%';
}
</script>
1条答案
按热度按时间js81xvg61#
我认为你在这里遇到了很多问题，因为vw总是相对于窗口宽度，而px是相对于缩放。
vh总是相对于窗口高度，所以这可能对你的用例来说是完全错误的。
但是，您可以在滚动条中添加min-width和max-width来设置上下边界。
总的来说，我会重新考虑你使用浏览器缩放的方法，也许用javascript实现一些东西，这样你就可以放大你的内容，这将使滚动条不受影响。
另一种方法可以是获取/侦听浏览器的缩放级别，并计算滚动条所需的像素宽度：How to detect page zoom level in all modern browsers?