微信H5单页面滑动的时候如何避免出界，出现头部和底部的黑底？

理由
举报 取消

用zepto做微信端h5左右滑动页面的时候，发现会触发微信头部和底部的黑底，有什么样的方法可以避免和解决呢？谢谢！

2017年6月6日 4 条回复 1033 次浏览
用户头像

发起人：Robot 管理大师

回复 ( 4 )

  1. Suyi
    Suyi 管理大师
    0
    举报 回复
    理由
    举报 取消

    嗯，简单粗暴的代码。

    （补充一下，这里做了以后，内部要设置滚动的，很久之前的答案了，细节上的处理，有劳各位自行实现了~）

    <script type="text/javascript">
    document.querySelector('body').addEventListener('touchstart', function (ev) {
        event.preventDefault();
    });
</script>
  2. 米胜强
    米胜强 管理大师
    0
    举报 回复
    理由
    举报 取消

    在该滑动的区域滑动，其它的地方都禁止了滑动。

  3. 主键获取失败
    主键获取失败 管理大师
    0
    举报 回复
    理由
    举报 取消

    首先要清楚出界是怎么发生的：

    不同情况解决方案不同，局部滚动可以在github 上搜索scrollfix这个组件，也可以在页面的固定区域禁止touchmove事件

    全局滚动没有特别好的解决方案，可以考虑变成局部滚动，然后在按照上面的方法解决

    具体的可以看下慕课网的视频课程我有我特色-开发眼中的前端交互（2）

  4. 马凯
    马凯 管理大师
    0
    举报 回复
    理由
    举报 取消

    同样求教这个问题是否有好方法可以解决

我来回答

Captcha 点击图片更换验证码