微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

CSS 实现移动设备滚动回弹效果_html/css_WEB-ITnose

php中文网
发布： 2016-06-21 08:56:57
原创
3633人浏览过

-webkit-overflow-scrolling 属性控制元素在移动设备上具有滚动回弹效果

Saferi 对于存在该属性的网页，会创建一个UIScrollView 提供子layer给渲染模块使用

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling

取值

auto 使用普通滚动，当手指从屏幕中移开时停止滚动

touch 使用具有回弹效果的滚动，滚动的速度与持续时间由滚动手势的强烈成正比

立即学习“前端免费学习笔记（深入）”；

萌动AI
萌动AI

CreateAI旗下AI动漫视频生成平台

萌动AI 438
查看详情 萌动AI

例子

HTML

<div class="wrapper">  <div class="scroller">    <!-- content -->  </div></div>
登录后复制

CSS

.wrapper {  overflow: auto;  -webkit-overflow-scrolling: touch;}
登录后复制

但是 IOS Saferi 在滑动的时候会出现讨厌的 “橡皮筋效果” (Over Scroll)

详情知乎

https://www.zhihu.com/question/22256539

注意及兼容性

硬件加速的系统级控件，所以效率很高但是这相对是耗更多内存的，最好在产生了非常大面积的overflow时才应用

iOS Safari 5.0 / Android 4.0 以上支持

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：HTML 5与HTML 4的区别_html/css_WEB-ITnose 下一篇：Nancy之Forms authentication的简单使用_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
使用CSS精确控制网页打印边距：理解@page与@media print CSS的@page规则和@mediaprint媒体查询是实现网页内容精确打印控制的关键工具。它们允许开发者定义打印页面的尺寸、方向以及内容边距，确保在用户执行打印操作时，网页能以专业、一致的布局呈现。本文将深入探讨如何利用这些CSS特性来优化打印输出，尤其是在处理边距设置时，旨在帮助开发者有效管理打印样式，而非直接操控浏览器打印对话框中的“最小”或“用户自定义”边距选项。
2025-11-12 11:57:23
661
如何使用移动端在线工具编辑HTML响应式设计的详细教程 答案：使用JSFiddle、CodePen、Replit等支持触控与实时预览的工具，结合视口标签、弹性布局和媒体查询，可在移动端高效编写并测试响应式HTML页面。
2025-11-12 11:57:03
686
JavaScript实现按钮悬停连续调整元素边距的滑块教程 本教程详细讲解如何利用JavaScript的setInterval和clearInterval函数，为网页滑块实现按钮悬停时连续调整元素边距的动画效果。通过动态设置边距增量和时间间隔，结合CSS过渡，可以创建平滑且响应式的用户体验，避免传统一次性边距调整带来的跳跃感。文章将提供完整的HTML、CSS和JavaScript代码示例，并探讨实现细节与注意事项。
2025-11-12 11:54:12
335
jQuery表格单元格操作教程：高效选择与数据更新 本教程详细介绍了如何使用jQuery高效地选择、遍历和更新HTML表格中的单元格。通过多种选择器、迭代方法及示例代码，您将学会如何根据ID、索引或内容定位单元格，并进行文本或HTML内容的插入与修改，从而实现动态表格数据管理。
2025-11-12 11:50:22
524
JavaScript动态加载Select下拉菜单选项：从基础到实践 本教程详细讲解如何使用JavaScript动态地为HTML下拉菜单填充选项。文章将从HTML结构入手，逐步演示如何清空现有选项、创建并添加新选项，并特别强调了在使用document.querySelector选择器时，针对CSS类名需要注意的关键细节，以确保代码的正确性和功能实现。
2025-11-12 11:50:03
402
如何实现点击外部区域关闭弹出框 本教程将指导您如何使用JavaScript和CSS创建一个功能完善的弹出框。该弹出框支持点击激活按钮后显示，点击弹出框内部的关闭按钮或点击弹出框外部的任何区域时自动隐藏。文章将详细讲解DOM事件处理、CSS动画以及如何精确控制点击事件的触发目标，以解决常见的弹出框交互问题，确保用户体验流畅。
2025-11-12 11:47:42
449
深入理解CSS border-radius的边界行为：角弧重叠与自动调整机制 当CSSborder-radius的相邻角弧值之和超出边框盒尺寸时，浏览器会根据CSS规范自动按比例缩小这些值，以防止角弧重叠。这解释了为何设置过大的border-radius值时，某些圆角效果可能不如预期，即border-radius并非总是绝对生效，而是受到几何约束的。
2025-11-12 11:47:00
695
jQuery动态创建元素事件绑定指南 本文探讨了在使用jQuery动态添加HTML元素后，如何正确地选择这些元素并为其绑定事件。针对直接事件绑定失效的问题，教程详细介绍了利用事件委托机制，通过jQuery的on()方法将事件绑定到静态父元素上，从而确保动态元素的事件能够被有效触发，提升前端交互的健壮性。
2025-11-12 11:45:02
553
HTML 邮件签名兼容性指南：解决图片缩放与文本错位问题 HTML邮件签名在不同客户端中常出现图片缩放和文本错位等兼容性问题，这主要是由于邮件客户端对CSS支持的差异性。本文将深入探讨导致这些问题的常见原因，并提供基于表格布局和内联样式的最佳实践，指导您构建稳定且在多数邮件客户端中表现一致的HTML签名。
2025-11-12 11:43:57
762
如何优雅地管理Select2互斥选择器并避免循环事件 本教程旨在解决在使用Select2插件时，两个互斥选择器（如黑名单与白名单）之间因事件触发机制不当导致的无限循环问题。文章将深入分析Maximumcallstacksizeexceeded错误的原因，并提供一个简洁有效的解决方案，即通过直接设置值而非触发change事件来确保选择器状态的正确同步，从而避免性能问题和程序崩溃。
2025-11-12 11:43:30
699
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部