完美解决，浏览器下拉显示网址问题 | 完美解决，使用原生 scroll 写下拉刷新...

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

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

在 psges 的 scroll-top 不为 0px 时候，往上拉只会触发，pages 自身的滚动条的过顶回弹，所以不会看到网址

但是如果你，pages 的 scroll-top 为 0 在往下拉，就又拉下来了
所以我们只要不让 pages 的 scroll-top 为 0 ，就可以在 iphone 解决，加以下代码

** 可以在安卓中就没有这等福利了，因为安卓没过顶回弹 **
解决这个问题其实也很简单，就是把 scrollTop 的值得稿大一点，让用户不可以一下子拉到最上面即可

用上面的方法，弄一个下拉刷新

直接上demo

    
    
    
    
    
    



    
下拉刷新
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp
    
This is temp

转载于:https://www.cnblogs.com/iron-whale/p/5919944.html