在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天我就来说说我的思路
我们在开发 web 如果在,非 body 元素中使用 scroll 就会碰到一个问题,没有惯性滚动,所以以前我们要么使用 iScroll 这类框架,要么就是自己使用触摸事件配合定时器来写一个惯性,自己写的当然体验不好,使用框架又感觉太不值得,因为一个小功能加了一个框架
现在 CSS3 出了一个方法,看代码:
- .pages {
- overflow: auto; - webkit - overflow - scrolling: touch; //只需要加这个属性就可以在非 body 元素中,有惯性滚动的感受
- }
当然在 iphone 中还有过顶回弹,安卓中就没这等福利了
下面进入主题
首先来说 iphone,在 iphone 中,div 只要加了
- overflow: auto; - webkit - overflow - scrolling: touch;
当你在滚动时候,就就有过顶回弹,所以我们如果这样布局
- htm ">htm" > <style > html,
- body,
- .pages,
- .content {
- width: 100 % ;
- height: 100 % ;
- } * {
- margin: 0;
- padding: 0;
- }.pages {
- overflow: auto; - webkit - overflow - scrolling: touch;
- } < /style>
- <body>
- <div class="pages">
- <!-- 这边写内容 -->
- </div > </body>/
在 psges 的 scroll-top 不为 0px 时候,往上拉只会触发,pages 自身的滚动条的过顶回弹,所以不会看到网址
但是如果你,pages 的 scroll-top 为 0 在往下拉,就又拉下来了
所以我们只要不让 pages 的 scroll-top 为 0 ,就可以在 iphone 解决,加以下代码
- se ">se" > <script > setInterval(function() {
- if ($(".pages").scrollTop() < 1) {
- $(".pages").scrollTop(1);
- }
- },
- 10); < /script>/
** 可以在安卓中就没有这等福利了,因为安卓没过顶回弹 **
解决这个问题其实也很简单,就是把 scrollTop 的值得稿大一点,让用户不可以一下子拉到最上面即可
- se ">se" > <script > setInterval(function() {
- if ($(".pages").scrollTop() < 500) {
- $(".pages").scrollTop(500); //这里做的比较露骨,真的实现时候可以加点 动画来过度
- }
- },
- 10); < /script>/
直接上 demo
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <title>
- temp
- </title>
- <style>
- html,body,.pages,.content{ width: 100%; height: 100%; } * { margin: 0;
- padding:0; } .pages { overflow: auto; -webkit-overflow-scrolling: touch;
- /*padding-top: 500px;//安卓时候加*/ } h5 { text-align: center; }
- </style>
- <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">
- </script>
- <script>
- window.onload = function() {
- setInterval(function() {
- //为了保证体验,在用户触摸在屏幕上的时候,关掉此定时器,安卓手机 触摸事件时候模拟一下 触顶回弹 , 定时器 可以用 window.requestAnimationFrame 来更好的体验
- //iphone 时候用的
- if ($(".pages").scrollTop() < 20) {
- $(".pages").scrollTop(20); //实现的时候,加个过度动画,且距离目标值越远,速度越快,即可
- }
- //安卓的用的
- // if( $(".pages").scrollTop() < 520 ){
- // $(".pages").scrollTop( 520 );//实现的时候,加个过度动画,且距离目标值越远,速度越快,即可
- // }
- },
- 1);
- };
- </script>
- </head>
- <body>
- <div class="pages">
- <h5>
- 下拉刷新
- </h5>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- <h1>
- This is temp
- </h1>
- </div>
- </body>
- </html>
来源: http://www.cnblogs.com/iron-whale/p/5919944.html