> 웹 프론트엔드 > HTML 튜토리얼 > CSS 实现移动设备滚动回弹效果_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-21 08:56:57
원래의
3242명이 탐색했습니다.

-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>
로그인 후 복사

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 以上支持

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿