禁用下拉刷新，需要在页面的滚动元素（通常是body或html）上设置overscroll-behavior-y: contain：
body {
overscroll-behavior-y: contain;
}这是Chrome关于该属性的文章中的单行示例。文章称，它可以禁用下拉刷新，同时保留过度滚动的光效（Chrome for Developers，2017年）。该属性控制滚动到达滚动容器边缘时的行为，MDN将去除浏览器的“下拉刷新”类行为列为其用途之一（MDN，2026年10月）。支持情况并不统一：MDN将overscroll-behavior标记为非Baseline功能，而且Safari的支持是部分的，因此请在你要支持的手机上测试。
overscroll-behavior的作用
overscroll-behavior决定滚动到达边界后，是否继续传递给父元素，以及浏览器是否显示自己的过度滚动效果。根据MDN，移动端浏览器默认在页面或滚动区域的顶部或底部会产生回弹效果，甚至刷新页面。该属性有四个关键字（MDN定义）：
| 值 | 向父元素的滚动链 | 回弹效果 |
|---|---|---|
auto |
允许（默认） | 允许 |
contain |
阻止 | 仍可能出现 |
none |
阻止 | 阻止 |
chain |
允许 | 阻止 |
滚动链是浏览器的默认行为：子元素到达边界时，把滚动传给父元素。Chrome的例子是应用抽屉滚动到底部后，它后面的页面开始滚动。overscroll-behavior是overscroll-behavior-x和overscroll-behavior-y的简写，两个关键字按x、y的顺序分别设置。
下拉刷新用contain还是none
如果你想阻止刷新，但保留平台的过度滚动反馈，请用contain；如果还想去掉这种效果，请用none。Chrome的文章将contain描述为阻止滚动链，同时仍显示Android过度滚动光效等局部效果；none则是在此基础上去掉这些效果。要在页面本身阻止下拉刷新：
/* 阻止下拉刷新，保留光效 */
body { overscroll-behavior-y: contain; }
/* 同时去掉光效和橡皮筋效果 */
body { overscroll-behavior-y: none; }Chrome的文章还指出，在html上设置contain可以阻止过度滚动导航；横向的none原本用于阻止左右滑动导航，但在该文章于2017年撰写时，Chrome尚未实现这一点。在依赖它来处理滑动手势之前，请先确认当前的行为。
禁用下拉刷新会去掉人们用来重新加载的手势。如果页面显示的是实时数据，请为用户提供刷新按钮或你自己的下拉手势，因为浏览器的手势将不复存在。
body还是滚动容器
该属性只对滚动容器生效，因此要设置在真正滚动的元素上。对于整个页面，就是决定视口的元素，即html或body。对于内部面板、抽屉或聊天列表，请设置在该面板上：
.chat-list {
height: 12em;
overflow: auto;
overscroll-behavior: contain;
}这样，当用户滚到列表末尾时，面板后面的页面就不会跟着滚动；MDN的示例对对话框也使用了同样的模式。MDN提到两个细节：
- 没有可滚动溢出内容的滚动容器，例如设置了
overflow: hidden的元素，总是处于其滚动边界，因此在它上面设置非默认的overscroll-behavior，会阻止向祖先元素的滚动链。MDN指出，这可以在对话框或覆盖层打开时阻止背景滚动。 <iframe>不是滚动容器，因此该属性对iframe元素本身没有效果。要在iframe内部控制滚动链，请同时在iframe文档的html和body上设置它。
2026年的浏览器支持
根据MDN browser-compat-data 8.1.7（2026年10月），关键字auto、contain和none分别自Chrome 63、Firefox 59和Safari 16（Safari iOS 16）起受支持。Safari的支持被标记为部分支持：该属性对没有可滚动溢出内容的滚动容器没有效果，Samsung Internet也有同样的部分支持说明。chain关键字较新：BCD将其列为自Chrome 150和Firefox 157起支持，而Safari不支持。BCD还为该属性设有单独的顶层条目，自Chrome 144和Firefox 150起。因此，web-features 3.44.0没有将overscroll-behavior列为Baseline，MDN也称其“非Baseline”，因为它在一些使用最广泛的浏览器中无法工作。
这对下拉刷新意味着什么：Chrome的文章使用的是带contain或none的长写形式overscroll-behavior-y，Safari 16加入了该属性（WebKit，2022年9月）。但WebKit的发行说明和MDN都没有说明，iPhone上的Safari是否会阻止页面级的刷新手势，因此请在iPhone上验证。
如何在手机上测试
下拉刷新是触摸手势，请在真机或模拟器上测试。
- 在手机上加载页面，滚动到最顶部，然后向下拖动。没有CSS时，浏览器可能会刷新或回弹。给
body设置overscroll-behavior-y: contain后，任何内容都不应重新加载。 - 将嵌套面板滚动到末尾，并继续拖动。如果面板设置了
contain，后面的页面应保持不动。 - 在你支持的每种浏览器中重复测试。Android上的Chrome、iPhone上的Safari和Samsung Internet各自的说明见上文。
- 如果你发布了已安装的Web应用，请在其中也重复测试；不同平台上的安装方式有何差异，见什么是渐进式网页应用。
如果要从桌面端测试Android，见从桌面端在Android上测试网站。如果没有手机，要测试iOS，见没有iPhone如何测试iPhone；移动端测试的其他部分，可参考移动网站测试清单。
Mobile View Extension会以手机的用户代理、屏幕尺寸和像素比重新加载标签页，因此它可以显示你的布局以及实际返回的页面，但它使用鼠标操作。它不会发送触摸事件，所以你无法在其中下拉刷新页面；而且它运行的是桌面版Chrome引擎，无法复现Safari的行为。可以用它检查自定义刷新按钮的布局，而手势测试请使用设备或模拟器。
常见问题
如何用CSS禁用下拉刷新？
在body或html上设置overscroll-behavior-y: contain。Chrome的文章把它称为一行代码，可以在保留过度滚动光效的同时禁用下拉刷新；如果也要去掉光效，请使用none。
overscroll-behavior的contain和none有什么区别？
contain阻止滚动链，但仍可能显示回弹效果；none同时阻止滚动链和回弹（MDN）。对于页面上的下拉刷新，根据Chrome的文章，两者在Chrome中都能阻止刷新。
overscroll-behavior在Safari中有效吗？
Safari 16及更高版本支持该属性，但实现是部分的：它对没有可滚动溢出内容的滚动容器没有效果（MDN browser-compat-data 8.1.7）。要看页面级手势会如何，请在iPhone上测试。
什么是滚动链？
滚动链是指子容器到达滚动边界后，浏览器把滚动传给父容器。例如，对话框滚动到末尾时，它后面的页面开始滚动。overscroll-behavior: contain可以阻止这种情况。