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()是下拉刷新方法,不用的可以去掉

    最后放上源码

    下载

  • 相关阅读:
    ubuntu12.04.2上利用cmake安装opencv2.4.6
    微软无线鼠标3500滚轮问题
    Linux 安装 Tomcat
    Linux 安装 MySQL
    Linux 安装 JDK
    Linux 安装 Redis 及踩坑
    IDEA Git 撤销push(回退到指定版本)
    【Java】Ajax实现级联城市
    node.js更换镜像源
    【Java】数据库连接池的简单使用
  • 原文地址:https://www.cnblogs.com/fengkuangkg/p/iscroll.html
Copyright © 2011-2022 走看看