zoukankan      html  css  js  c++  java
  • iscroll双重滚动,向上滚动隐藏一部分,下拉后显示

    最近项目需求:下面是页面,当用户向上滚动时候,【隐藏的】部分也向上滚动直至消失,这时候【标题】和【搜索框】在最顶部,而【内部的】可以继续滚动,而当【内部的】滚动到最顶部时候,也就是【这个是内部1】时候,【隐藏的】也下拉出来

    主要是思路是考虑用两个iscroll,一个从【隐藏】部分一直到下面(.bigScroll),一个是包含【内部】的滚动(.smallScroll),当bigScroll滚动的bigScroll.y等于bigScroll.maxScrollY时候,注销bigScroll(bigScroll.disable()),

    而当【内部的】smallScroll.y等于0的时候,激活bigScroll(bigScroll.enable);不过这两个判断都是需要在scrollEnd方法里面

    代码

     bigScroll.on("scrollEnd",function () {
    //            如果没有scrollEnd事件,么有执行下面的办法,不清楚原因
                if(bigScroll.y==bigScroll.maxScrollY){
                    bigScroll.disable();
                }
            })
            smallScroll.on("scrollEnd",function () {
    //            如果没有scrollEnd事件,么有执行下面的办法,不清楚原因
                if(smallScroll.y==0){
                    bigScroll.enable();
                }
            })
    View Code

    这里需要动态获取两个iscroll的高度

            $(".bigScroll").height($("body").height()-$("header").height());
            //这里了的48是要保留的高度,这里既是nav的高度,可以试着改变这里的值,
            $(".smallScroll").height($("body").height()-48-$("header").height());
    scroll()是下拉刷新方法,不用的可以去掉

    最后放上源码

    下载

  • 相关阅读:
    敏捷开发中的sprint是什么意思_百度知道
    桐君堂_百度百科
    HSTS Preloading
    做CloudXNS产品运营的这半年 – CHINA Testers
    java~spring-ioc的使用
    java~api返回值的标准化
    java8的函数式接口
    redis使用场景和java测试案例
    springboot~注册bean的方法
    学生信息管理系统问题集锦
  • 原文地址:https://www.cnblogs.com/fengkuangkg/p/iscroll.html
Copyright © 2011-2022 走看看