CSS属性overscroll-behavior控制容器滚动行为

最新推荐文章于 2024-12-26 12:03:30 发布
原创 最新推荐文章于 2024-12-26 12:03:30 发布 · 4.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #chrome #滚动

本文介绍了Chrome63版本中新加入的overscroll-behavior CSS属性，该属性可以有效控制子元素滚动到底部或顶部时是否影响父元素的滚动行为。文章详细解释了如何使用此属性来改善用户体验，特别是在移动端设备上的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Chrome63版本新特性中包含支持overscroll-behavior属性，此属性的功能是什么呢？

我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。使用该属性可以禁掉此行为。

在子元素上应用overscroll-behavior: contain即可。

其他属性值还有none, 该功能除了contain的功能外还会阻止节点的默认滚动行为，主要是移动端的效果，比如安卓的炫光（容器边缘的半圆型光圈）。

在移动端还可以禁用下拉刷新的功能，只要在body元素上应用overscroll-behavior-y: contain;即可。

完整介绍可查看原文：https://developers.google.com/web/updates/2017/11/overscroll-behavior#disablp2r

使用overscroll-behavior控制滚动边界行为
weixin_41455464的博客
06-27 74
你有没有遇到过这样的情况：在一个页面里，有一个小的滚动区域（比如一个弹窗、一个侧边栏），当你滚动到这个小区域的顶部或底部时，整个页面的滚动条竟然也跟着动了起来？这样，当你在侧边栏滚动到顶部或底部时，只有侧边栏会滚动，页面主体内容不会受到影响。它就像一位经验丰富的“交通警察”，能精准地控制滚动行为，让你的页面滚动起来丝滑又听话，告别“一动全身”的尴尬。当你滚动到弹窗的底部时，整个页面的滚动条也跟着动了起来，这显然不是我们想要的。当滚动到达边界时，它会“传染”给父元素，导致不必要的滚动，影响用户体验。
34. 打字机效果 & 水平滚动贴合
粉丝们务必加入微信粉丝群
08-30 927
需要注意的是,虽然滚动贴合是一个强大的工具,但它不应该被过度使用。确保贴合点是逻辑的,增强了用户体验,而不是喧宾夺主。过度使用或在不恰当的地方使用可能会分散用户的注意力,或使你的页面难以阅读。这个技巧创建了一个水平滚动的图片库,当用户停止滚动时,图片会自动贴合到视口的中心。它告诉浏览器,滚动应该在水平方向上"贴合",并且贴合是强制性的,意味着滚动将总是结束于一个贴合点。你可以通过改变网格的尺寸、图片的样式或贴合的位置来轻松定制这个效果。这定义了每个元素应该贴合的位置——在这种情况下,是在容器的中心。
04 【布局之Overscroll Behavior 定位偏移量】
DSelegent的博客
08-30 472
04 【布局之Overscroll Behavior 定位偏移量】
CSS overscroll-behavior
weixin_34336292的博客
02-02 140
overscroll-behavior新属性解决了在手机上弹出滚动的一些问题，具体内容查看网址：https://www.w3cplus.com/css/overscroll-behavior.html 转载于:https://www.cnblogs.com/yuanyanbk/p/8405270.html...
CSS overscroll-behavior：
YDOOK
08-13 432
overscroll-behavior ：auto 默认，继承父类滚动样式 overscroll-behavior ：contain 阻止滚动链接，不继承父类滚动样式，使用Android 炫光或 iOS 回弹效果。 overscroll-behavior ：none 阻止滚动链接，不继承父类滚动样式，不使用Android 炫光或 iOS 回弹效果。 ...
overscroll-behavior
guoqkmiss的博客
05-22 1365
overscroll-behavior overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。 默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”
CSS系列（37）-- Overscroll Behavior详解
欢迎来到这里，希望文章能对你有所帮助
12-26 964
CSS之旅第三十七站
IOS 的弹性滚动解决方案
09-01
- 使用`position: absolute`或`position: fixed`来限制滚动容器的大小，避免整个页面参与滚动。 - 对于内容高度不确定的滚动区域，可以使用`height: auto`并结合`max-height`来控制。 - 避免在弹性滚动区域内使用`...
<template> <view class="container"> <!-- 顶部导航栏 --> <u-navbar :title="title" leftIconColor="#fff" placeholder bgColor="#57dc7f" autoBack titleStyle="color:#fff;text-align:center;" :customStyle="navbarStyle" v-if="title" ></u-navbar> <!-- 滚动容器 --> <view class="scroll-wrapper"> <scroll-view scroll-y class="scroll-view" @scrolltolower="$emit('lower')" :style="scrollStyle"> <!-- 部分页面有的背景图 没有title才展示 --> <image class="bgImg" :src="getImgUrl('/statics/img/backImg.png')" mode="widthFix" v-if="isShow"></image> <!-- 内容主图 --> <slot></slot> </scroll-view> </view> <!-- 底部插槽 --> <slot name="bottom"></slot> </view> </template> <script> import getImgUrl from '@/mixins/getImgUrl.js'; export default { mixins: [getImgUrl], name: 'common-scroll', props: { title: String, isShow: { type: Boolean, default: false } }, computed: { scrollStyle() { const systemInfo = uni.getSystemInfoSync(); const navBarHeight = this.title ? systemInfo.statusBarHeight + 44 : 0; return { minHeight: `calc(100vh - ${navBarHeight}px)` }; } } }; </script> <style lang="scss" scoped> .container { height: 100vh; display: flex; flex-direction: column; } .scroll-wrapper { flex: 1; min-height: 0; /* 关键：允许内容压缩 */ padding-bottom: env(safe-area-inset-bottom); } .scroll-view { height: 100%; overflow-y: auto; box-sizing: border-box; overflow-anchor: none; /* 防止滚动跳动 */ position: relative; overscroll-behavior-y: contain; .bgImg { width: 100%; height: 600rpx !important; position: absolute; top: 0; left: 0; z-index: -1; } } ::v-deep .u-navbar { z-index: 999; flex-shrink: 0; /* 防止导航栏被压缩 */ } </style> 调整这个代码：vue2+js+uni-app+uview需求我需要一个容器：所有的页面都需要包含在这个容器中，有些页面传递title，则需要展示u-navbar，底部有 <slot name="bottom"></slot>是用来放底部按钮的。顶部的navbar和底部的bottom说是不能滚动的，背景为#f5f5f5，中间可以滚动的部分，如果长度没有超出的话，就不能滚动，如果超出了，就滚动。如果没有title,但是有bottom的按钮的话，那就除开bottom后超出的部分 都可滚动，如果都没有的话，那就整个页面超出部分可以滚动。别动我u-navbar的颜色。还有，scroll-wrapper的高度默认是除开u-navbar和bottom以外的部分。如果没有u-navbar，scroll-wrapper的高度就是除开bottom以外的部分，如果都没有就是100vh,滚动部分的高度如果超出100vh，就可以滚动，如果没有超出，就不更滚动！！！
07-25
但是，当中间内容区域滚动时，父容器并不滚动，所以底部按钮不会移动。这样，我们只需要让中间内容区域在父容器内滚动即可。 因此，我们可以这样设计： 页面结构： ``` <!-- 顶部导航栏，使用fixed定位，...
禁用ios滚动条橡皮筋效果
05-12
通过CSS属性`overscroll-behavior`直接控制滚动边界行为： ```css body { overscroll-behavior: none; /* 全局禁用滚动传递 */ } .container { overscroll-behavior-y: contain; /* 仅纵向禁止触发父容器滚动 */ }...
element-plus Infinite Scroll 无限滚动手机浏览器触底不刷新
最新发布
08-06
4. **检查父容器高度和滚动**：确保无限滚动绑定的元素是实际发生滚动的元素，并且其父容器没有干扰滚动行为。如果滚动发生在祖先元素上，那么触底事件将无法正确触发。 5. **移动端特殊处理**：移动端可能存在触摸...
CSS 中的overscroll-behavior属性
读心悦
09-25 762
是 CSS 中的一个属性，它用于控制元素在发生滚动时，当滚动范围超出其边界时的行为。这个属性对于改善用户体验特别有用，尤其是在移动端设备上，当用户尝试滚动一个已经达到滚动极限的元素时，可以通过此属性来避免默认的“弹性”效果或自定义这种效果。
使用 CSS overscroll-behavior 控制滚动行为：自定义下拉刷新和溢出效果
weixin_30568715的博客
11-16 283
CSS 的新属性overscroll-behavior允许开发者覆盖默认的浏览器滚动行为，一般用在滚动到顶部或者底部。 背景 滚动边界和滚动链接（boundary & chaining） 在 APP 中经常使用的抽屉导航(drawer)中，我们期望的效果是：滚动到底部时，滚动停止，因为我们到达了"滚动边界"。 但是在 Web 页面中滚动并不会停止，而是继续滚动抽屉后面...
overscroll-behavior和overscroll-behavior-x和overscroll-behavior-y的属性
qq_43235503的博客
06-29 232
overscroll-behavior和overscroll-behavior-x和overscroll-behavior-y的属性
CSS Overscroll Behavior Module Level 1
奇舞周刊
06-24 297
编者按：本文作者奇舞团前端开发工程师何文力，同时也是 W3C CSS 工作组成员。6 月 6 日，W3C 发布了第一份滚动溢出行为工作组草案 CSS Overscroll...
overscroll-behavior称为“滚动链”
文摘资讯
09-20 937
overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度...
CSS scroll-behavior:
YDOOK
08-13 385
Initial value auto Applies to scrolling boxes Inherited no Media visual Computed value as specified Animation type discrete Canonical order the unique non-ambiguo...
CSS scroll-behavior
broken_promise的博客
08-31 561
当滚动通过导航或者CSSOM滚动API触发时的滚动行为只有两个关键字属性值.autosmooth📕注意除了上面两种滚动触发外的任何滚动, 比如用户使用鼠标滚动, 都不会被这个属性影响.当这个属性在定义在标签, 其作用域整个视窗. 如果这个属性定义在将不会作用于视窗.📕浏览器可以忽略这个属性的值😅先看代码...
HTML中元素的滚动溢出影响其父级元素的滚动-overscroll-behavior
JackieDYH的博客
01-18 838
在编写跨浏览器兼容的代码时，请考虑使用其他滚动事件相关属性或 JavaScript 来实现所需的滚动行为。是一个 CSS 属性，用于控制滚动事件在元素和其父级滚动容器之间的链接行为。这样，当用户在滚动元素时，滚动事件将仅在元素内部进行处理，不会传递给父级容器。是一个 CSS 属性，用于控制元素在滚动到边界时的滚动行为。该属性可以应用于任何具有滚动内容的元素，例如滚动容器（如。这样，当用户在滚动元素时，不会出现滚动溢出的效果。例如，要禁止滚动事件链接到父级滚动容器，可以将。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值