H5解决ios滑动出现白条 和引发的相关问题解决方法

你们百度到的方法

你们百度到的方法一般是

[]

#app{
  pisition:fixed;
  overflow:scroll;
  width:100%;
  height:100%;
}

可是这样做有什么弊端呢？
你会发现这样去处理，ios的确是上下滚动，白条不会出现了。
可是有没有发现，你滚动的时候，特别不舒服？就是你的手指拖动多少，它就滚动多少，那么如何去解决？

better-scroll

不废话，直接上代码

[]

   npm i better-scroll -s

import BScroll from ‘better-scroll’

const warpper = document.querySelector(‘#app’) //注意哦，只对#app里面的第一个元素生效哦
const scroll = new BScroll(warpper, {
  click: true,
  bounce: {
    top: false,
    bottom: false,
    left: false,
    right: false   //为什么要设置这三个方式呢？ 因为他默认是苹果式滚动内容~
  }
})
 

 #app{
   position: relative;
height:100%;  //我是苹果6设计图 px2html(667px)
width:100%;  //反正我是px2html(200px)  px2html是我自己弄的转换，具体请百度em rem 适应屏幕适配的用法 再不用天猫的适配库
 }
 body{
   position:fixed;
width:100%;
height:100%;
 }
 

这是重点！这里面有坑的！ 注意，你在app的所应用的第一个元素，请把里面的position:fixed;提取出来！否则，这个东西不会呈现出fixed效果，会呈现absolute效果！！！！！！！！！
例如弹窗 tips的 请务必放在app里面 和第一个元素兄弟关系！~

你们想要的效果的参考链接
快去看效果~ 点我~！