如何通过HTML/CSS使自定义滚动条尺寸不受缩放及窗口调整影响？

问题描述 #

我做了个自定义滚动条，遇到几个问题：

• 用10px设宽度时，Ctrl+滚轮缩放页面，滚动条视觉宽度会跟着变
• 换1vw的话，页面缩放没问题，但调整窗口大小，滚动条宽度会变
• 用1vh的话，垂直调窗口大小也会影响滚动条尺寸

想让滚动条尺寸固定，不管页面缩放还是窗口调整都不变，该怎么弄？

原代码：

CSS

#scroll-bar {
    position: fixed;
    width: 1vh;
    height: 100%;
    top: 0;
    right: 0;
    background: black;
}

JavaScript

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+'%';
}

解决方案 #

要实现滚动条视觉尺寸完全固定，不受页面缩放和窗口调整影响，可以通过px单位结合JavaScript动态修正缩放影响来实现：

步骤说明

1. 用px作为基础宽度：px在窗口尺寸变化时不会改变，只有页面缩放会影响其视觉大小，我们可以用JS抵消这个影响。
2. 监听resize事件：页面缩放会触发resize，所以监听这个事件，实时计算缩放比例，调整滚动条宽度，让视觉大小保持固定。

修改后的完整代码

CSS

#scroll-bar {
    position: fixed;
    width: 10px; /* 设定你想要的固定视觉宽度 */
    height: 100%;
    top: 0;
    right: 0;
    background: black;
    z-index: 999; /* 确保滚动条不会被内容盖住 */
}

JavaScript

const bar = document.getElementById('scroll-bar');
const targetWidth = 10; // 和CSS里的目标宽度一致

// 计算当前页面的缩放比例
function getZoomLevel() {
    return window.innerWidth / document.documentElement.clientWidth;
}

// 调整滚动条宽度，抵消缩放带来的视觉变化
function fixScrollbarWidth() {
    const zoom = getZoomLevel();
    bar.style.width = `${targetWidth / zoom}px`;
}

// 初始化宽度
fixScrollbarWidth();

// 监听窗口resize（包含页面缩放）事件，实时调整
window.addEventListener('resize', fixScrollbarWidth);

// 原滚动条滚动逻辑优化（加上内容变化时的高度重算）
window.onscroll = function () {
    const totalHeight = document.body.scrollHeight - window.innerHeight;
    if (totalHeight <= 0) {
        bar.style.height = '0%';
        return;
    }
    const barHeight = (window.pageYOffset / totalHeight) * 100;
    bar.style.height = `${barHeight}%`;
}

原理

• getZoomLevel()通过对比缩放后的视口宽度和原始视口宽度，算出当前页面的缩放比例。
• 把滚动条宽度设为目标宽度 / 缩放比例，这样不管页面缩放多少，滚动条的视觉宽度始终和你设定的targetWidth一致。
• 监听resize事件，确保窗口调整或页面缩放时立刻更新宽度。

内容的提问来源于stack exchange，提问作者Aryan Rajput