如何在jobs-component组件存在时隐藏页面滚动条

方法一：组件生命周期控制body类名（推荐） #

CSS无法直接检测页面中是否存在特定元素，最稳妥的方式是借助组件的生命周期钩子，动态给<body>添加/移除控制类：

1. 在jobs-component的挂载阶段（比如Vue的mounted、React的useEffect无依赖项回调）添加类：

document.body.classList.add('hide-scrollbar');

2. 在组件卸载阶段（Vue的unmounted、React的useEffect清理函数）移除类：

document.body.classList.remove('hide-scrollbar');

3. 修改index.html中的样式，仅针对带类的body隐藏滚动条：

<head>
    <style>
        /* 隐藏滚动条的样式 */
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        /* 兼容IE/Edge和Firefox */
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        /* 默认状态下显示滚动条 */
        body::-webkit-scrollbar {
            display: block;
        }
    </style>
</head>

方法二：纯CSS :has()选择器实现（兼容性有限） #

如果jobs-component是<body>的直接子元素，可以用CSS的:has()选择器检测元素存在，但该选择器在旧版Firefox等浏览器中不支持：

<head>
    <style>
        /* 当jobs-component存在时隐藏滚动条 */
        body:has(jobs-component)::-webkit-scrollbar {
            display: none;
        }
        body:has(jobs-component) {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        /* 默认显示滚动条 */
        body::-webkit-scrollbar {
            display: block;
        }
    </style>
</head>

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