Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > CSS 实现移动设备滚动回弹效果_html/css_WEB-ITnose

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

WBOY
Release： 2016-06-21 08:56:57
Original
3243 people have browsed it

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

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

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

取值

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

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

例子

HTML

<div class="wrapper">  <div class="scroller">    <!-- content -->  </div></div>
Copy after login

CSS

.wrapper {  overflow: auto;  -webkit-overflow-scrolling: touch;}
Copy after login

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

详情知乎

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

注意及兼容性

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

iOS Safari 5.0 / Android 4.0 以上支持

Related labels：
CSS 实现移动设备滚动回弹效果
source：php.cn
Previous article：HTML 5与HTML 4的区别_html/css_WEB-ITnose Next article：Nancy之Forms authentication的简单使用_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2165
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2315
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1950
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1828
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1880
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template