完美解决，浏览器下拉显示网址问题

在 web 开发过程中我们经常遇到，不想让用户下拉看到我的地址，也有时候在 div 中没有惯性滚动，就此也出了 iScroll 这种关于滚动条的框架，但是就为了一个体验去使用一个框架好像又不值得，今天我就来说说我的思路

div 中惯性滚动问题

我们在开发 web 如果在，非 body 元素中使用 scroll 就会碰到一个问题，没有惯性滚动，所以以前我们要么使用 iScroll 这类框架，要么就是自己使用触摸事件配合定时器来写一个惯性，自己写的当然体验不好，使用框架又感觉太不值得，因为一个小功能加了一个框架

现在 css3 出了一个方法，看代码：

.pages {

	overflow: auto;

	-webkit-overflow-scrolling: touch;//只需要加这个属性就可以在非 body 元素中，有惯性滚动的感受

}

当然在 iphone 中还有过顶回弹，安卓中就没这等福利了

下面进入主题

首先来说 iphone，在 iphone 中，div 只要加了

overflow: auto;

-webkit-overflow-scrolling: touch;

当你在滚动时候，就就有过顶回弹，所以我们如果这样布局

<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 解决，加以下代码

<script>

	setInterval(function(){

		if( $(".pages").scrollTop() < 1 ){

			$(".pages").scrollTop( 1 );

		}

	},10);

</script>

** 可以在安卓中就没有这等福利了，因为安卓没过顶回弹 **

解决这个问题其实也很简单，就是把 scrollTop 的值得稿大一点，让用户不可以一下子拉到最上面即可

<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>