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