HTML与CSS实现页面滚动效果的多种方法

HTML


 id="section1">
    
第一部分
    
这里是第一部分内容。

点击导航链接后，浏览器会将对应区域滚动到可视范围。

这种方法最大的优点是简单，不需要 JavaScript，也具有较好的可访问性。

二、使用 CSS 实现平滑滚动

默认情况下，锚点跳转通常是瞬间完成的。如果希望页面从当前位置平滑移动到目标区域，可以使用 CSS 的 scroll-behavior 属性。

CSS
html {
    scroll-behavior: smooth;
}

完整示例：

HTML

 lang="zh-CN">

     charset="UTF-8">
    
    





 id="home">
    
首页


 id="about">
    
关于


 id="contact">
    
联系

scroll-behavior: smooth 会让页面滚动过程更加自然，特别适合单页网站、产品介绍页和文档导航。

需要注意的是，该属性主要控制由脚本或导航触发的滚动行为，并不是让鼠标滚轮本身始终以相同动画方式运行。

三、使用 scroll-margin-top 解决固定导航遮挡

实际开发中经常会遇到一个问题：顶部导航设置了 position: fixed 后，点击锚点虽然可以滚动到目标元素，但目标标题可能被固定导航栏遮挡。

此时可以使用 scroll-margin-top。

CSS
section {
    scroll-margin-top: 80px;
}

假设顶部固定导航高度为 80px：

CSS
html {
    scroll-behavior: smooth;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
}

section {
    scroll-margin-top: 80px;
}

这样点击：

HTML
 href="#about">关于我们

页面定位到 #about 时，会自动预留顶部空间。

相比使用额外的空白元素，这种方式更加简洁，也更适合现代 CSS 布局。

四、使用 scroll-snap 实现滚动吸附

如果页面由多个整屏内容组成，例如全屏首页、产品展示页、图片浏览页，可以使用 CSS Scroll Snap 实现滚动吸附。

基本代码如下：

CSS
.container {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}

.section {
    height: 100vh;
    scroll-snap-align: start;
}

HTML：

HTML
 class="container">
     class="section">第一屏
     class="section">第二屏
     class="section">第三屏

scroll-snap-type 用来定义滚动容器的吸附规则：

CSS
scroll-snap-type: y mandatory;

其中：

• y 表示垂直方向；

• x 表示水平方向；

• mandatory 表示滚动结束时强制吸附；

• proximity 表示接近目标位置时进行吸附。

目标元素通过：

CSS
scroll-snap-align: start;

指定吸附位置。

常见的吸附位置还有：

CSS
scroll-snap-align: center;

以及：

CSS
scroll-snap-align: end;

这种方案非常适合全屏滚动、卡片浏览和移动端横向内容展示。

五、实现横向滚动效果

网页滚动并不局限于垂直方向。通过 overflow-x 可以创建横向滚动区域。

CSS
.list {
    display: flex;
    overflow-x: auto;
    gap: 20px;
}

.item {
    flex: 0 0 300px;
}

对应 HTML：

HTML
 class="list">
     class="item">内容一

     class="item">内容二

     class="item">内容三

     class="item">内容四

如果希望横向滚动时产生吸附效果，可以进一步结合 scroll-snap：

CSS
.list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.item {
    flex: 0 0 300px;
    scroll-snap-align: start;
}

这样用户左右滑动时，每个项目都会自动对齐到指定位置。

六、控制页面是否允许滚动

overflow 属性可以控制元素内容超出范围后的处理方式。

例如：

CSS
body {
    overflow: hidden;
}

可以禁止整个页面滚动。

如果只想禁止水平方向滚动，可以使用：

CSS
body {
    overflow-x: hidden;
}

而垂直方向继续保持正常滚动：

CSS
body {
    overflow-y: auto;
}

开发响应式页面时，如果出现移动端页面左右出现异常空白、内容超出屏幕的问题，可以检查是否存在横向溢出。

不过不建议为了隐藏问题而直接全局设置：

CSS
* {
    overflow-x: hidden;
}

这种做法可能掩盖真正的布局错误，并导致部分交互元素无法正常显示。

七、设置滚动容器

除了整个浏览器页面，还可以让指定元素独立滚动。

CSS
.content {
    width: 400px;
    height: 300px;
    overflow-y: auto;
}

HTML：

HTML
 class="content">
    
第一段内容
    
第二段内容
    
第三段内容
    
第四段内容
    
第五段内容

当内容高度超过 300px 后，.content 会出现垂直滚动区域，而浏览器页面本身不一定需要跟着滚动。

如果希望同时控制两个方向：

CSS
.content {
    overflow: auto;
}

如果明确只需要纵向滚动，则推荐：

CSS
.content {
    overflow-y: auto;
    overflow-x: hidden;
}

八、调整滚动条样式

在部分基于 Chromium 的浏览器中，可以使用 ::-webkit-scrollbar 相关伪元素自定义滚动条。

例如：

CSS
.content::-webkit-scrollbar {
    width: 8px;
}

.content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.content::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
}

.content::-webkit-scrollbar-thumb:hover {
    background: #666;
}

还可以设置水平滚动条：

CSS
.content::-webkit-scrollbar {
    height: 8px;
}

需要注意，这类伪元素并非所有浏览器都具有完全一致的支持方式。因此，如果项目需要跨浏览器保持一致的视觉效果，应避免过度依赖浏览器私有滚动条样式。

九、使用 CSS 实现滚动到指定位置的间距

除了 scroll-margin-top，还可以使用 scroll-padding-top 设置滚动容器内部的预留区域。

例如固定顶部导航高度为 70px：

CSS
html {
    scroll-padding-top: 70px;
    scroll-behavior: smooth;
}

此时锚点滚动时会考虑顶部预留空间。

对于整个页面而言，这种写法非常方便：

CSS
html {
    scroll-padding-top: 70px;
}

如果是独立滚动容器，则可以写成：

CSS
.container {
    scroll-padding-top: 60px;
}

通常可以简单理解为：

• scroll-margin：设置目标元素外部的滚动间距；

• scroll-padding：设置滚动容器内部的滚动内边距。

十、使用 CSS 实现滚动到顶部按钮

传统做法通常需要 JavaScript 监听滚动位置，不过如果需求只是返回页面顶部，可以直接利用 HTML 锚点。

HTML
 href="#top" class="back-top">返回顶部

 id="top">

配合：

CSS
html {
    scroll-behavior: smooth;
}

就可以实现平滑返回顶部。

如果页面顶部本身就是：

HTML
 id="top">

那么按钮可以写成：

HTML
 href="#top">返回顶部

这种方案代码量非常少，而且不依赖 JavaScript。

十一、使用 JavaScript 实现更精细的滚动控制

如果需要动态计算滚动位置、监听滚动状态或者根据条件执行滚动操作，CSS 就不一定足够了。

例如：

JavaScript
window.scrollTo({
    top: 500,
    behavior: 'smooth'
});

也可以滚动到指定元素：

JavaScript
document.querySelector('#about').scrollIntoView({
    behavior: 'smooth',
    block: 'start'
});

其中：

JavaScript
behavior: 'smooth'

控制平滑滚动。

JavaScript
block: 'start'

表示让目标元素靠近滚动区域顶部。

如果只是简单的页面锚点跳转，优先使用 HTML + CSS 即可；只有当滚动行为需要动态控制时，再引入 JavaScript 更合适。

十二、减少动画带来的可访问性问题

平滑滚动虽然能够提升视觉体验，但部分用户可能开启了系统的“减少动态效果”设置。对于重视可访问性的项目，可以结合 prefers-reduced-motion。

例如：

CSS
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

这样普通情况下采用平滑滚动，而用户明确要求减少动画时恢复默认滚动行为。

如果页面还有其他 CSS 动画，也可以采用相同思路进行处理。

十三、常见滚动方案如何选择

不同需求适合的实现方式并不相同。

实际开发时，应优先选择最简单的实现方式。如果 HTML 和 CSS 已经能够满足需求，就没有必要为了一个普通的锚点滚动功能额外增加 JavaScript。

十四、页面滚动效果开发中的注意事项

首先需要确认滚动对象。很多滚动问题并不是动画属性设置错误，而是页面实际滚动的是某个内部容器。

例如：

CSS
.container {
    height: 100vh;
    overflow-y: auto;
}

此时滚动发生在 .container 上，而不是 window。

其次，固定定位元素容易影响锚点定位效果。遇到导航栏遮挡内容时，可以优先考虑：

CSS
scroll-margin-top

或者：

CSS
scroll-padding-top

而不是通过增加无意义的空白元素解决。

另外，scroll-snap 不宜滥用。文章、新闻、后台系统等需要用户自由浏览的页面，强制吸附可能反而影响操作体验。它更适合具有明确分屏结构或卡片结构的页面。

最后，还需要考虑移动端体验。桌面端看起来正常的横向滚动区域，在手机上可能因为内容宽度、触摸操作和嵌套滚动容器而产生不同表现，因此上线前最好使用实际移动设备进行测试。

通过合理组合 HTML 锚点、scroll-behavior、scroll-margin、scroll-padding、scroll-snap 和 overflow 等特性，可以覆盖绝大多数常见的页面滚动需求。简单场景保持 HTML 和 CSS 实现，不仅代码更加轻量，也更容易维护；遇到动态定位、复杂交互或滚动状态联动时，再使用 JavaScript 扩展功能，能够让页面滚动体验更加稳定和自然。