如何实现带原生滚动条的Body窗口滚动区域？

需求说明 #

• Body内容在固定位置的窗口框架内可滚动
• 鼠标悬停框架时仍能触发滚动
• 滚动条位于原生系统位置（窗口外侧，而非框架内部）

当前问题：滚动条出现在框架内部，给Body设置margin无法解决。

解决方案 #

核心思路是让<html>元素负责滚动逻辑，<body>仅作为内容容器（不设置自身的滚动），通过给<html>设置padding来模拟原需求中Body的外围空间，具体调整如下：

修改后的CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1 {
    margin-bottom: 40px;
}
p {
    margin-bottom: 20px;
}
html {
    background: red;    
    height: 100vh;
    width: 100%;
    /* 用padding替代原body的margin，留出外围红色区域 */
    padding: 100px 40px;
    overflow-y: auto;
    box-sizing: border-box;
}
body {
    background: #fff;
    border-radius: 50px;
    height: 100%;
    width: 100%;
    padding: 40px;
    /* 移除margin，依赖html的padding实现外围空间 */
    margin: 0;
    /* 移除body自身的滚动，让html负责滚动 */
    overflow: visible;
}

HTML代码（无需修改） #

<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

原理说明 #

1. 滚动逻辑转移：将滚动行为从<body>转移到<html>，这样滚动条属于<html>元素，会显示在浏览器窗口的外侧（原生系统位置）。
2. 外围空间实现：用<html>的padding替代原<body>的margin，既保留了红色的外围区域，又确保<body>的范围完全处于<html>的滚动区域内，鼠标悬停在框架上时能正常触发滚动。
3. 容器样式保留：<body>保持白色背景、圆角和内边距，仅作为内容容器，不处理滚动，确保内容在框架内展示。

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