如何为高度未知的通用HTML页面初始化OverlayScrollbars脚本

首先得准备好OverlayScrollbars的资源：下载官方提供的CSS和JS文件，在<head>标签内引入CSS样式文件，在<body>标签的末尾（内容之后）引入JS脚本文件。

第一步：调整body的样式 #

你当前给.t-body设置了height:100vh，这会把body高度固定为视口高度，不符合“高度预先未知”的需求，得修改这个样式：

.t-body {
    margin: 0;
    /* 移除固定高度，让body随内容自动撑开 */
    /* height: 100vh; */
    overflow: auto; /* 保留这个属性，确保内容超出时触发滚动 */
    min-height: 100vh; /* 可选：如果内容不足一屏，让body至少占满整个视口高度 */
}

另外，原CSS里的background-color: none是错误写法，合法值应该是transparent，记得修正：

#allrecords, .t-records {
    -webkit-font-smoothing: antialiased;
    background-color: transparent;
}

第二步：初始化OverlayScrollbars脚本 #

在引入的OverlayScrollbars JS之后，添加初始化代码，等待DOM加载完成后选中body元素进行初始化：

<script>
// 等页面DOM完全加载后再执行初始化
document.addEventListener('DOMContentLoaded', function() {
    // 获取目标body元素
    const bodyElement = document.querySelector('body.t-body');
    // 初始化OverlayScrollbars，括号里第一个参数是目标元素，第二个是配置选项
    const scrollbarInstance = OverlayScrollbars(bodyElement, {
        // 可根据需求配置滚动条，示例配置：
        scrollbars: {
            theme: 'os-theme-light', // 可选主题，也可以用默认样式
            autoHide: 'scroll', // 滚动时显示滚动条，停止后自动隐藏
            autoHideDelay: 800 // 隐藏延迟时间（毫秒）
        }
    });

    // 如果你的段落内容是动态加载的（比如异步获取后添加），在内容更新完成后要调用update方法：
    // scrollbarInstance.update();
});
</script>

完整修改后的HTML结构 #

<html>
<head>
    <title>OverlayScrollbars Test</title>
    <!-- 引入OverlayScrollbars的CSS文件 -->
    <link rel="stylesheet" href="你的路径/overlayscrollbars.min.css">
    <style>
    *,
    *:before,
    *:after {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    div,
    span,
    h1,
    h2,
    a,
    img,
    video {
        margin: 0;
        padding: 0;
        border: 0;
    }

    @media print {
        body {
            min-width: 1200px;
            max-width: 1200px;
            padding: 0;
            margin: 0 auto;
            border: none;
        }
    }

    .t-body {
        margin: 0;
        /* 移除固定高度，让body随内容自适应 */
        /* height: 100vh; */
        overflow: auto;
        min-height: 100vh; /* 可选：内容不足时占满视口 */
    }

    #allrecords {
        -webkit-font-smoothing: antialiased;
        background-color: transparent;
    }

    .t-records {
        -webkit-font-smoothing: antialiased;
        background-color: transparent;
    }
    </style>
</head>

<body class="t-body">
    <div id="allrecords" class="t-records">
        <!-- 多个段落内容 -->
        <p>测试段落1</p>
        <p>测试段落2</p>
        <p>测试段落3</p>
        <!-- 更多段落 -->
    </div>

    <!-- 引入OverlayScrollbars的JS文件 -->
    <script src="你的路径/overlayscrollbars.browser.min.js"></script>
    <!-- 初始化脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const bodyEl = document.querySelector('body.t-body');
            const osInstance = OverlayScrollbars(bodyEl, {
                scrollbars: {
                    autoHide: 'scroll',
                    theme: 'os-theme-light'
                }
            });

            // 动态内容更新后执行：
            // osInstance.update();
        });
    </script>
</body>
</html>

重要提示 #

• 必须移除body的固定高度设置，否则无法实现高度自适应；
• overflow:auto是OverlayScrollbars正常工作的必要条件，不能删除；
• 动态加载内容后一定要调用update()方法，让滚动条重新计算容器尺寸，避免滚动条不生效。

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