我做了一个自定义滚动条,唯一的问题是,每当我放大或缩小(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?